box-shadow陰影詳解

每次使用box-shadow,都要查閱資料才能實現對應的效果,現在總結一下,方便以后查看。

使用語法：

　　element{box-shadow: inset x-offset y-offset blur-radius spread-radius color};

　　element{box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色};

 

屬性值的設置：

　  1. 投影方式：此參數可選，默認的投影方式是外陰影("outset")；如果取其唯一值"inset",就是將外陰影變成內陰影；

     2.X-offset:是指陰影水平偏移量,其值可正可負，正值，則陰影在對象的右邊，負值，陰影在對象的左邊，為0時，對象的左右邊會同時出現陰影；

     3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負值，正值，陰影在對象的底部，負值時，陰影在對象的頂部，為0時，對象的頂部和底部會同時出現陰影；

     4.陰影模糊半徑：此參數是可選，只能為正值，如果其值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊；

     5. 陰影擴展半徑：此參數可選，其值可為正負值，正值，則整個陰影都延展擴大，反之，則縮小

     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; }

 效果如下：