CSS box-shadow 屬性

定義和用法

box-shadow 屬性向框添加一個或多個陰影。

提示：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！

另請參閱：

CSS3 教程：CSS3 邊框

HTML DOM 參考手冊：boxShadow 屬性

實例

向 div 元素添加 box-shadow：

div
{
box-shadow: 10px 10px 5px #888888;
}

親自試一試

頁面底部有更多實例。

CSS 語法

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

注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

屬性值

值 描述 測試
h-shadow 必需。水平陰影的位置。允許負值。 測試
v-shadow 必需。垂直陰影的位置。允許負值。 測試
blur 可選。模糊距離。 測試
spread 可選。陰影的尺寸。 測試
color 可選。陰影的顏色。請參閱 CSS 顏色值。 測試
inset 可選。將外部陰影 (outset) 改為內部陰影。 測試

技術細節

默認值： none
繼承性： no
版本： CSS3
JavaScript 語法： object.style.boxShadow="10px 10px 5px #888888"

更多實例

扔到桌子上面的圖片
本例演示如何創建“寶麗來”圖片，并旋轉圖片。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit- 或 -moz- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5