CSS3 box-shadow 屬性 · W3School CSS 參考手冊

# CSS3 box-shadow 屬性 ## 實例向 div 元素添加 box-shadow： ``` div { box-shadow: 10px 10px 5px #888888; } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。 ## 定義和用法 box-shadow 屬性向框添加一個或多個陰影。提示：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！ | 默認值： | none | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.boxShadow="10px 10px 5px #888888" | | --- | --- | ## 語法 ``` box-shadow: _h-shadow_ _v-shadow_ _blur_ _spread_ _color_ inset; ``` 注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。 | 值 | 描述 | 測試 | | --- | --- | --- | | _h-shadow_ | 必需。水平陰影的位置。允許負值。 | [測試](/tiy/c.asp?f=css_box-shadow) | | _v-shadow_ | 必需。垂直陰影的位置。允許負值。 | [測試](/tiy/c.asp?f=css_box-shadow) | | _blur_ | 可選。模糊距離。 | [測試](/tiy/c.asp?f=css_box-shadow&p=3) | | _spread_ | 可選。陰影的尺寸。 | [測試](/tiy/c.asp?f=css_box-shadow&p=7) | | _color_ | 可選。陰影的顏色。請參閱 CSS 顏色值。 | [測試](/tiy/c.asp?f=css_box-shadow&p=10) | | inset | 可選。將外部陰影 (outset) 改為內部陰影。 | [測試](/tiy/c.asp?f=css_box-shadow&p=15) | ## 親自試一試 - 實例 [扔到桌子上面的圖片](/tiy/t.asp?f=css3_image_gallery) 本例演示如何創建“寶麗來”圖片，并旋轉圖片。 ``` <!DOCTYPE html> <html> <head> <style> body { margin:30px; background-color:#E9E9E9; } div.polaroid { width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; /* Add box-shadow */ box-shadow:2px 2px 3px #aaaaaa; } div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -moz-transform:rotate(-8deg); /* Firefox */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ -o-transform:rotate(-8deg); /* Opera */ transform:rotate(-8deg); } </style> </head> <body> <div class="polaroid rotate_left"> <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" /> <p class="caption">上海鮮花港的郁金香，花名：Ballade Dream。</p> </div> <div class="polaroid rotate_right"> <img src="/i/china_pavilion.jpg" alt="世博中國館" width="284" height="213" /> <p class="caption">2010年上海世博會，中國館。</p> </div> </body> </html> ``` ## 相關頁面 CSS3 教程：[CSS3 邊框](/css3/css3_border.asp "CSS3 邊框")