CSS 參考手冊

CSS @規(guī)則(RULES)

box-shadow CSS屬性將一個或多個陰影效果應用于元素的框。

下表為此屬性的用法說明和版本歷史記錄，以及該屬性在javascript腳本中的使用語法。

默認值：	none
適用于：	所有元素。它也適用于::first-letter。
繼承：	沒有
可動畫制作：	是。查看動畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.boxShadow="8px 8px 6px #000000"

該屬性的語法如下：

box-shadow: [, , ... shadowN] | none | initial | inherit
       where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

下面的示例演示了如何使用box-shadow屬性。

示例

.shadow{
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px 2px #999;
}

您可以使用inset關鍵字來應用元素框內的陰影。插圖陰影畫在邊框內，在背景上方，但在內容下方。

示例

.shadow-inside{
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: inset 0 0 6px 2px #999;
}

下表描述了此屬性的值。

值	描述
必需 -必須指定以下值以使屬性有效。
offset-x	第一個長度值指定陰影的水平距離。正值繪制的陰影向框右側偏移，而負值繪制的陰影向左側偏移。
offset-y	第二個長度值指定陰影的垂直距離。正值會將陰影向下偏移，而負值會使元素上方的陰影偏移。
可選 -以下值是可選的。
blur-radius	第三長度值是模糊距離。該值越大，模糊越大，因此陰影變大和變亮。默認值為0，陰影很銳利。不允許使用負值。
spread-radius	第四長度是展開距離。正值會使陰影形狀沿所有方向擴展指定的半徑。負值會使陰影形狀收縮。
color	顏色是陰影的顏色。該值可以是任何受支持的顏色值。如果未指定，則通常是color屬性的值。
inset	如果存在，將投影陰影從外部陰影更改為內部陰影。嵌入陰影繪制在邊框內，背景上方，但元素內容下方。
none	不會顯示陰影。這是默認值。
initial	將此屬性設置為其默認值。
inherit	如果指定，則關聯(lián)元素采用其父元素box-shadow的屬性值。

box-shadow屬性瀏覽器的兼容性，下表中的數字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該屬性。

	Firefox 3.5+ ^-moz-，4 + Google Chrome 4+ ^-webkit-，10+ Internet Explorer 9+ Apple Safari 3.1+ ^-webkit-，5.1 + Opera 10.5+

參見以下教程：CSS3陰影，CSS偽元素。

相關屬性：text-shadow。