CSS3 的box-shadow進階之 - 基礎知識篇

box-shadow被認爲是CSS3最好的特性之一，發揮想象力，搭配其它屬性，能夠作出不少好看的效果（以下圖，將會放在下一篇文章講解），這篇文章主要講一下box-shadow的基礎知識。

       

box-shadow的六個屬性講解

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必填項，表示水平（即X軸）陰影的位置（或者說偏移量）。正值陰影出如今元素的右邊，負值出如今元素的左邊。
v-shadow：必填項，表示垂直（即Y軸）陰影的位置（或者說偏移量）。正值陰影出如今元素的下邊，負值出如今元素的上邊。
blur： 可選，表示模糊距離。模糊數值越大，尖銳度越小，陰影越朦朧和模糊。負值是不被容許的，並會被處理成0。
spread ：可選，表示陰影的尺寸。能夠理解爲從元素到陰影的距離。正值會讓陰影向各個方向按照指定的數值延伸。負值會讓陰影收縮得比元素自己尺寸更小。
color ：可選，表示陰影的顏色。
inset：可選。將外部陰影 (outset) 改成內部陰影。默認爲outset；

舉幾個栗子：

 

仔細看看上面這張圖，經過設置不一樣屬性值，呈現不一樣的陰影效果，本身手動敲一敲印象更深。

 

陰影疊加

值得一提的是，最後一個陰影疊加的效果，是給元素添加多個box-shadow，使用逗號分隔，其中多個box-shadow的層級是由高到低，排在裏面的會覆蓋排在後面的陰影。

咱們再看一下最後一張圖的放大版，下面元素被添加了三個陰影，其中第一個陰影的半徑爲8px。第二個陰影半徑爲16px，因爲有8px被前一個陰影遮蓋了，因此咱們只看到8px。第三個陰影半徑爲24px，因爲前面16px被前面的陰影遮蓋了，因此也是隻看到8px。這就是陰影疊加啦。

 

本文完結，下一篇文章，將會講解怎麼利用box-shadow製做開頭的那兩個動效。敬請期待。

碼字不易，以爲有幫助，請給個贊吧~

另外，文章爲原創，如需轉載，請註明出處，謝謝！