重學 -- 多重邊框box-shadow · 前端知識 -- 學習整理

>[success] # box-shadow 多重邊框 ~~~ 1.'box-shadow : h-shadow v-shadow blur spread color inset' 2.屬性依次分別為'控制陰影的水平距離，垂直距離，模糊程度' '模糊大小，模糊顏色，默認外部陰影加上inset內部陰影' 3.根據下面案例理解，'box-shadow' 實際是生成一個形狀大小和所賦值的元素一致的圖形，通過控制這個形狀的水平垂直距離，模糊度，已經大小來實現陰影效果 ~~~ >[info] ## 對上面六個屬性詳細講解 >[danger] ##### 控制水平距離和垂直距離 ![](https://box.kancloud.cn/b5da42c2624499d35b45bddcd9829d35_336x218.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: yellowgreen; box-shadow: 100px 100px #665; } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~ >[danger] ##### 改變模糊度 ![](https://box.kancloud.cn/cfae31655385590409648278f9635d7b_262x227.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: yellowgreen; box-shadow: 100px 100px 10px #665; } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~ >[danger] ##### 第四個參數改變大小 ![](https://box.kancloud.cn/c705f204eba64c44bf1d557878211362_278x285.png) ~~~ 1.改變后的大小 = 原本大小 + 改變參數*2 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: yellowgreen; box-shadow: 100px 100px 10px 50px #665; } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~ >[info] ##### 利用 box-shadow 多層邊框 * 因為'box-shadow' 設置后的陰影是實際不存在的元素上， * 如果想實現鼠標懸停效果需要使用inset設置成內邊框 ![](https://box.kancloud.cn/68f93025cbebea34644f610fa6b836e5_135x124.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: yellowgreen; box-shadow: 0px 0px 0px 10px #665 inset,0px 0px 0px 15px rgb(230, 230, 11) inset; } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~ * 設置多層邊框的時候要注意層級嵌套的時候要第四個參數一層比一層大才行 ![](https://box.kancloud.cn/0793c2822e65ec87619f4b07df9bc1b7_163x122.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 60px; margin: 25px; background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6); } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~ >[info] ## 使用outline 方案 ~~~ 1.' outline : outline-color ||outline-style || outline-width ' 2.上面參數是或的關系，因此位置可以隨意更改，解釋依次是，'顏色'，'樣式'，'粗細' ~~~ >[danger] ##### outline 多重邊框的弊端和優勢 ~~~ 1.只能設置一層邊框，因為'outline '不接受逗號分隔的形式 2.如果元素是倒圓角，那么使用'outline ' 邊框不會貼合他是一個方塊 3.優點：可以設置邊框的樣式 ~~~ >[danger] ##### 案例 * 案例利用boder 和 outline屬性搭配形成兩個邊框 ![](https://box.kancloud.cn/88eacd3e938fa11d7103f3c50d886beb_188x141.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 60px; margin: 25px; background: yellowgreen; border: 10px solid #655; outline: 5px dashed deeppink; } </style> </head> <body> <div class="div1"> </div> </body> </html> ~~~