box-shadow陰影詳解

每次使用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; }
 

 效果以下:

相關文章
相關標籤/搜索