CSS3 box-shadow 屬性
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-image | 10.0 -webkit- | 9.0.0 | 4.0 (2.0)[3] 3.5(1.9.1) -moz | 5.1[1] 3.0 -webkit | 10.5[1] -o- |
屬性定義及使用說明
box-shadow屬性可以設置一個或多個下拉陰影的框。
| 默認值: | none |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxShadow="10px 10px 5px #888888" |
語法
box-shadow:h-shadow v-shadow blur spread colorinset;
注意： boxShadow屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由2-4 個長度值、一個可選的顏色值和一個可選的inset 關鍵字來規定。 省略長度的值是0。
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。 水平陰影的位置。 允許負值 |
| v-shadow | 必需的。 垂直陰影的位置。 允許負值 |
| blur | 可選。 模糊距離 |
| spread | 可選。 陰影的大小 |
| color | 可選。 陰影的顏色。 在CSS顏色值尋找顏色值的完整列表 |
| inset | 可選。 從外層的陰影（開始時）改變陰影內側陰影 |
在線實例
旋轉圖像
這個例子演示瞭如何創建"polaroid"的照片和旋轉圖片。
相關文章
CSS3教程: CSS3 Borders