6.7 CSS 框阴影(box-shadow)

向框添加一个或多个阴影

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)属性的使用。