第十四讲：CSS阴影

给HTML元素添加阴影，一般会先想到CSS属性 box-shadow，它最经典的用法如下：

<style>
.ybox1 {
	width: 300px;
	height: 100px;
	box-shadow: 2px 4px 6px gray;
}
</style>

<div class="ybox1"></div>

点击查看效果

第5行代码就是 box-shadow 属性值，属性值中，第一、二个参数是阴影在X、Y轴上的偏移距离，阴影的朝向，X偏移为负数时向左、正数时向右，Y偏移为负值是向上、正数是向下。第三个参数是阴影模糊半径，默认值0，不能为负数，值越大阴影越大、越淡。第四个参数是阴影颜色，支持浏览器支持的任何颜色表示法。

但是，box-shadow属性的参数不止这些，它还有另外两个可选参数，一是内阴影参数 inset，可以放在所有参数的前面或后面，用空格与其他参数隔开；二是扩展半径，如果设置此值，必须放在模糊半径和阴影颜色之间。下面的实例，先给元素设置一个没有XY偏移量的内阴影，再设置一个也没有XY偏移量、没有模糊半径、只有1px扩展半径和颜色的外阴影——它充当元素的边框：

<style>
.ybox2 {
	width: 300px;
	height: 100px;
	box-shadow: inset 0 0 50px skyblue, 0 0 0 1px blue;
}
</style>

<div class="ybox2"></div>

点击查看效果

阴影可以无限多重，全放在 box-shadow 属性里，各组阴影表达语句之间用小角逗号隔开。

阴影可以和元素主体分离。下面的例子，外阴影完全跑到右边去了，内阴影则因为没有XY偏移量还在元素那里：

<style>
.ybox3 {
	width: 300px;
	height: 100px;
	box-shadow: 320px 2px 6px gray, inset 0 0 6px 3px green;
}
</style>

<div class="ybox3"></div>

点击查看效果

若即若离的阴影有妙用，比如绘制月牙：

<style>
.ybox4 {
	width: 100px;
	height: 100px;
	box-shadow: 25px 10px 0 blue, 140px 10px 0 silver, 260px 10px gold;
	border-radius: 50%;
}
</style>

<div class="ybox4"></div>

点击查看效果

蓝色的月牙是利用元素挡住阴影的一部分做出来的，换言之，阴影没有完全脱离元素；而其右边的银盘和金盘则脱离了元素，它们反映出元素原本的形状，只是颜色不同——主元素没有设置背景颜色。

box-shadow属性虽好，也有它无能为力的地方，比方说针对有透明的的图片，它无法渲染出透明的效果。因此，基于CSS滤镜 filter 的 drop-shadow() 函数应运而生，以弥补 box-shadow 的不足。试比较二者的代码和效果：

<style>
.mypic1 {
	box-shadow: 200px 0 0 #fa64c7;
}
.mypic2 {
	filter: drop-shadow(200px 0 0 #fa64c7);
}
</style>

<p><img class="mypic1" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" /></p>
<p><img class="mypic2" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" /></p>

点击查看效果

可以明显看到，box-shadow属性的阴影只是一个矩形，图片的自然形状渲染不出来。而 filter 的 drop-shadow() 完美地呈现出图片的形状。drop-shadow() 也有局限：它只有阴影XY轴偏移量和模糊半径，没有内阴影、没有阴影扩展半径。

drop-shadow() 函数也支持多重阴影，语法规范和 box-shadow() 有所不同，它用空格隔开个语句。试比较：

box-shadow: 25px 10px 0 blue, 140px 10px 0 silver; /* 用逗号隔开多组阴影语句 */
filter: drop-shadow(200px 0 0 pink) drop-shadow(400px 0 0 blue); /* 用空格隔开多组阴影语句 */

另外，filter滤镜的drop-shadow子滤镜由于投影性质的关系，它生成的下一个阴影都会将前面的阴影作为“克隆”的对象。本讲的作业就拿这个来做体验：给一个 img 标签加载一张有透明度的图片，并在CSS中制作 filter: drop-shadow() 阴影，要求最终的阴影结果是，与原始图片同一个水平方向的有3个阴影、图片下方4个阴影，也就是和图片一块，共有2行4列 2*4=8 个图案。提示：实际设计的阴影代码仅三组，两组针对水平方向，一组针对纵向方向。

返回目录