更多"Try it Yourself"下面的例子。
定義和用法
箱陰影屬性附加的一個或多個陰影的元件。
默認值: | none |
---|---|
遺傳: | no |
動畫: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript語法: | object .style.boxShadow="10px 20px 30px blue" Try it |
瀏覽器支持
在表中的數字規定,完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-號碼或-moz-指定用一個前綴工作的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- | 9 | 4 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS語法
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Note:該箱陰影屬性附加的一個或多個陰影的元件。 該物業是一個逗號分隔陰影列表,以2-4的長度值,可選顏色,以及一個可選的關鍵字插入每個指定。 省略長度為0。
屬性值
值 | 描述 | 播放 |
---|---|---|
none | 默認值。 不顯示陰影 | 播放 ” |
h-shadow | 需要。 水平陰影的位置。 允許使用負值 | 播放 ” |
v-shadow | 需要。 垂直陰影的位置。 允許使用負值 | 播放 ” |
blur | 可選的。 模糊距離 | 播放 ” |
spread | 可選的。 陰影的大小。 允許使用負值 | 播放 ” |
color | 可選的。 顏色的陰影。 默認值是黑色。 看看CSS顏色值可能的顏色值的完整列表。 注:在Safari (on PC)是必需的顏色參數。 如果不指定顏色,陰影不顯示在所有。 | 播放 ” |
inset | 可選的。 從外側陰影的陰影變化(outset)到內側陰影 | 播放 ” |
initial | 將此屬性設置為默認值。 閱讀關於初始 | 播放 ” |
inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
扔在桌子上的圖像
這個例子演示了如何創建"polaroid"照片和旋轉照片。
相關頁面
CSS3教程: CSS3邊框
HTML DOM參考: boxShadow property