CSS：box-shadow属性探秘

2017-09-28

在学习CSS3时发现了box-shadow 这一奇妙又强大的属性，于是利用它结合CSS3动画做了一些loading效果图。
演示地址：戳我
下面让我们来探索这个奇妙的属性值。

语法

box-shadow 属性值由六部分组成：

1
box-shadow: offset-x offset-y blur spread color position;

一定要注意顺序。

offset-x

offset-x 用来声明阴影的水平偏移，即阴影在 X 轴上的位置。当值为正数，阴影位于元素的右侧，若值为负数，阴影位于元素的左侧。

1
2
3
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

offset-y

offset-y 用来声明阴影的垂直偏移，即阴影在 Y 轴上的位置。当值为正数，阴影位于元素的下面，若值为负数，阴影位于元素的上面。

1
2
3
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

blur

blur 表示阴影的模糊半径。效果同高斯模糊滤镜。值为 0 意味着阴影完全不模糊。blur 值越大，边角越不锋利，阴影越朦胧。不允许负值，负值等同于 0。

1
2
3
4
5
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

spread

spread 表示阴影的大小。也可以把这个值看做阴影与元素之间的距离。当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，小于元素尺寸。默认值 0 会保持阴影和元素尺寸一致。

1
2
3
4
5
.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }

color

color 表示阴影的颜色。可以是任何颜色单位

1
2
3
.left { box-shadow: 0px 0px 20px 10px #67b3dd }

.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

position

position 表示阴影的位置，可选项。默认为外部阴影。可以通过使用 inset 关键字来制作内部阴影。

1
2
3
.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }

.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

多重阴影

一个元素的 box-shadow 属性可以接受多个阴影声明，组成一个逗号分隔的列表。

1
2
3
4
.foo { 
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

圆角阴影

box-shadow 属性的 border-radius 由同一个元素的 border-radius 属性来控制。

1
2
3
4
.foo { 
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-raduis: 50%;
}

通过这六个属性值，不需要额外添加dom元素或是伪元素，就可以创造出各种图形效果，是不是很神奇呢。