CSS – 阴影 shadow

简介

text-shadow 还没有出现时，大家在网页设计中阴影一般都是使用 ps 做成图片，现在有了css3 可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

text-shadow

text-shadow语法

text-shadow : none 或 [颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径],...

blur :

length : 长度值，可以是负值。用来指定阴影的延伸距离。其中 X轴 是水平偏移值，Y 轴是垂直偏移值

blur : 阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离

color : 指定阴影颜色，也可以是 rgba 透明色

说明：可以给一个对象应用一组或多组阴影效果，方式如前面语法显示一样，用逗号隔开。

text-shadow : x y blur color 中的 x 表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移。

y 是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移。

blur 是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将 blur 值设为0

color 是指阴影的颜色，其可以使用 rgba 色。

box-shadow

box-shadow 是边框限影样式，它共有6个参数，分别如下

box-shadow : h v blur spread inset

h: 水平方向的偏移值

v : 垂直方向的偏移值

blur(可选) : 模糊，默认0

spread(可选) : 阴影的尺寸，扩展阴影，默认为0

color(可选) : 颜色，默认为黑色

inset(可选) : 内阴影，默认为

spread 可以相当于一个聚光灯往物体靠近所形成的阴影面积，数值越大，聚光灯越近。