編程教程CSS3 box-shadow 屬性
CSS3box-shadow屬性
實例
向 div 元素添加陰影：
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
在本頁底部查看更多實例。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -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