box-shadow · CSS基礎

## box-shadow 屬性 ### 定義和用法 box-shadow 屬性向框添加一個或多個陰影。提示：請使用 border-image-\* 屬性來構造漂亮的可伸縮按鈕！ 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* | 必需。水平陰影的位置。允許負值。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | | *v-shadow* | 必需。垂直陰影的位置。允許負值。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | | *blur* | 可選。模糊距離。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | | *spread* | 可選。陰影的尺寸。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | | *color* | 可選。陰影的顏色。請參閱 CSS 顏色值。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | | inset | 可選。將外部陰影 (outset) 改為內部陰影。 | [測試](https://www.w3cschool.cn/statics/demosource/css-box-shadow.html) | ## 實例1 [扔到桌子上面的圖片](https://www.w3cschool.cn/tryrun/showhtml/css3_image_gallery) 本例演示如何創建“Ballade”圖片，并旋轉圖片。 ## 實例2--向 div 元素添加 box-shadow： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html> ```