免費AI編程助手
深入了解box-shadow
2023-03-02 14:24 更新
陰影（
box-shadow），要使用此屬性，可以說很簡單，但要真正地利用好它，卻又不是一件容易的事。今天我們就來深入了解一下box-shadow。先來看看詞法：
box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;
參數(shù)說明：
- 陰影類型：可選；如省略，默認是外陰影；它有且只有一個值“
inset”，表示為內陰影； x-offset：陰影水平偏移量，它可以是正負值。如為正值，則陰影在元素的右邊；如其值為負值，則陰影在元素的左邊；y-offset：陰影垂直偏移量，它可以是正負值。如為正值，則陰影在元素的底部；如其值為負值時，則陰影在元素的頂部；blur-radius：陰影模糊半徑，可選，它只能是正值。如值為0，則陰影不具有模糊效果；它的值越大，陰影的邊緣就越模糊；spread-radius：陰影擴展半徑，可選，它可以是正負值。如為正值，則擴大陰影的尺寸；如為負值，則縮小陰影的尺寸；color：陰影顏色，可選，如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致。（經(jīng)測試，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推薦省略顏色值。
注意：顏色（color）也可以放在最前面的，
inset值也可以放在最后面；陰影并不會占據(jù)空間，也就是說它不會陰影布局。簡單用法：
box-shadow: 5px 4px 4px #000;
接下來來看看陰影繪制的步驟（參考：CSS揭秘）：
- 以該元素相同的尺寸（border-box的尺寸）和位置，畫一個背景色為
#000的正方形 - 把它向右移
5px，向下移4px。 - 使用高斯模糊算法將它進行
4px的模糊處理。 - 最后，將原始圖形移到模糊圖形上方，接著將模糊圖形與原始元素的交集部分（也就是原始元素壓在模糊圖形的部分）去除。
最后一點，我們很容易驗證，只需將原始元素的背景色設置成半透明，你并沒有看到它下層有任何投影。
你也可以看W3C官網(wǎng)對
box-shadow的分析：https://www.w3.org/TR/css3-background/#box-shadow
從這張圖中，我們可以看到border-radius圓角，陰影擴展、陰影模糊以及padding都會影響元素陰影的：非零值的border-radius將會以相同的作用影響陰影的外形；元素陰影與box模型的層次一樣，外陰影會在元素背景之下，內陰影會在邊框之下背景之上。所以整個疊加層級就是：邊框>內陰影>背景圖片>背景顏色>外陰影。
最基本的例子（鄰邊陰影和四周陰影）：
有些時候，我們只需一側有陰影，可是貌似
box-shadow并沒有提供直接的設置值，不過，別忘記了我們有第四個數(shù)值，它可以擴大或縮小陰影的尺寸。單邊陰影是這樣產(chǎn)生的：
上面最后一個圖形使用了多陰影，每個陰影之間用“
,”逗號隔開。注意：設置多個陰影時，覆蓋順序是由前至后，定義越前面的陰影有越高的層級，會覆蓋在后面定義的陰影之上。
內陰影和
外陰影的唯一區(qū)別在于偏移量正負值時的方向：當設置內陰影（
inset）時，x-offset水平偏移量為負值時，方向是右側，為正值時，方向是左側；y-offset垂直偏移量為負值時，方向是底部，為正值時，方向是頂部。實例：
（1）Loading
這是別人的神作，更多看這里：http://www.17sucai.com/pins/8148.html
（2）3D按鈕
當然，
box-shadow的作用并不會局限于此，只要你有耐心，相信你可以實現(xiàn)更加酷炫的效果。如有不足之處，歡迎指正！
以上內容是否對您有幫助：
更多建議：