每次使用box-shadow,都要查閱資料才能實現對應的效果,如今總結一下,方便之後查看。web
使用語法:chrome
element{box-shadow: inset x-offset y-offset blur-radius spread-radius color};瀏覽器
element{box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色};spa
屬性值的設置:code
1. 投影方式:此參數可選,默認的投影方式是外陰影("outset");若是取其惟一值"inset",就是將外陰影變成內陰影;對象
2.X-offset:是指陰影水平偏移量,其值可正可負,正值,則陰影在對象的右邊,負值,陰影在對象的左邊,爲0時,對象的左右邊會同時出現陰影;blog
3. Y-offset:是指陰影的垂直偏移量,其值也能夠是正負值,正值,陰影在對象的底部,負值時,陰影在對象的頂部,爲0時,對象的頂部和底部會同時出現陰影;element
4.陰影模糊半徑:此參數是可選,只能爲正值,若是其值爲0時,表示陰影不具備模糊效果,值越大陰影的邊緣就越模糊;it
5. 陰影擴展半徑:此參數可選,其值可爲正負值,正值,則整個陰影都延展擴大,反之,則縮小safari
6. 陰影顏色:此參數可選,不設定任何顏色時,瀏覽器會取默認色,但各瀏覽器默認色不同,特別是在webkit內核下的safari和chrome瀏覽器將無色,也就是透明,建議不要省略此參數。
若是要設置多個方向的陰影只按照要求設置X-offset或者Y-offset的正負值,肯定設置的陰影的方向。設置不一樣方向不一樣顏色的陰影能夠用逗號隔開,如:
/*設置四邊不一樣顏色外陰影*/ .element{ box-shadow:-10px 0 10px red, /*左邊陰影*/ 10px 0 10px yellow, /*右邊陰影*/ 0 -10px 10px blue, /*頂部陰影*/ 0 10px 10px green; /*底邊陰影*/ }
效果以下:
/*在元素四周疊加不一樣顏色陰影*/
.element{
box-shadow:0 0 10px 5px black,
0 0 10px 20px red; }
效果以下: