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> ```