CSS3 阴影

CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用:
1,盒子阴影
(1)盒子阴影的属性是 box-shadow
前两个值分别表示阴影水平方向和垂直方向的偏移量。
第三个值表示模糊距离。最后一个值是阴影颜色。

CSS3 阴影

CSS3 阴影

(2)盒子阴影是可以随着盒子形状而自动变化的
CSS3 阴影
CSS3 阴影

(3)如果盒子下面有内容的话,可以使用 rgba() 函数,将阴影颜色设置为半透明的
(4)伸展范围设置
在模糊距离后面还可以添加一个值,表示伸展范围(spread)。用来增大模糊边界之前的实心颜色面积。
CSS3 阴影
CSS3 阴影
(5)在颜色后面加上 inset 用来创建内部阴影
CSS3 阴影
CSS3 阴影
2,文本阴影
文本阴影的属性是 text-shadow。
第一个是水平方向的值,第二个是垂直方向的值,第三个是模糊度,第四个是颜色。

CSS3 阴影
CSS3 阴影