css box-shadow知識點及多重邊框

box-shadow（）

參數：

h-shadow:水平陰影的位置。允許負值。

v-shadow:垂直陰影的位置。允許負值。

blur:模糊距離。

spread:擴張半徑（可正可負。投影面積則可大可小）

color：陰影顏色

inset:將外部陰影 (outset) 改為內部陰影。

　IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

 

小應用：多重邊框

box-shadow方案

一個正值的擴張半徑加上水平、垂直為0的偏移量和為0的模糊度，得到的投影效果跟一道實線邊框效果很像。

 

div{         
     box-shadow: 0 0 0 10px red;
     background: yellowgreen;     
     }

效果圖：

 

 

這用border屬性來生成完全一樣的效果，一點問題沒有。不過，它有一點好處在於，它支持逗號分隔法，我們完全可以創建任意數量的投影。border可以做到嗎？no！

 

注意：box-shadow是層層疊加的，列如我還想在上面的效果圖外面加個6px的外框，那么擴張半徑則為(10px+6px)16px;

 

甚至你可以在邊框底下再加一些常規的投影：

 

div{  
     box-shadow: 0 0 0 10px red,
　　　　　　　　　　0 0 0 16px green,
　　　　　　　　　　0 2px 5px 16px rgba(0,0,0,.5);     
     background: yellowgreen;
     
     }

 

 

 

outline方案

 

如果你只需要二層邊框，outline不錯。先設置常規的border邊框，再加上outline（描邊），它比上面的box-shadow的一大優點就是，可以生成虛線等邊框。

 

上面效果圖用outline可以這樣寫：

div{	
　　　　border: 10px solid red;
　　　　outline: 6px solid green;

　　　　background: yellowgreen;

}

　　描邊的另一個好處是，可以通過outline-offset屬性來控制它跟元素邊緣之間的間距。可以接受負值。看個效果圖：

 

 div{ 
     outline: 3px dashed white;
     background: black;
     outline-offset: -25px;
     }

 

注意點：

這個outline方案只適用於雙層邊框的場景，如需多重邊框，前一種方案就很好用了。

如果元素邊框是圓角，那么描邊可能還是直角。（是一個bug,未來可能貼合border-radius圓角）