6.6 CSS 框阴影（box-shadow）
优质
小牛编辑
138浏览
2023-12-01
box-shadow 属性向框添加一个或多个阴影。
浏览器支持
| Property | ||||||
|---|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 12.0 | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
语法
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 取值 | 描述 |
|---|---|
| none | 缺省值，没有阴影。 |
| h-shadow | 必需。水平阴影的位置。可以为负数。 |
| v-shadow | 必需。垂直阴影的位置。可以为负数。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影大小。可以为负数。 |
| color | 可选。阴影颜色。缺省为黑色（black）。 在电脑上的Safari中，颜色参数是必需的。否则阴影不呈现。所以好的习惯是总是指定一个颜色。 |
| inset | 可选。把外阴影（outset）变成内阴影。 |
| initial | 设置为默认值。 |
| inherit | 从父元素继承该属性。 |
在线实例
例子1 - 带阴影的相片
例子2 - 纺锤形分隔线
后面这个例子的完整教程请阅读：使用纯CSS3创建一个纺锤形分隔线， 该例子同时还演示了上一章节所讲述的边框圆角（border-radius）属性的使用。