【css要点总结】015 阴影box-shadow

阴影

文章中的demo无法实时预览，可以在这里获得更佳的阅读体验。

css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容，你将学会如何使用这些方式，知道它们各自的用途。

一.box-shadow

box-shadow是比较常用的一个属性，可以为元素边框周围添加一层阴影效果。

.ele {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow接受的值，按照从左至右的顺序依次表示：

1. x偏移：水平偏移，正值表示向右偏移，负值表示向左偏移。
2. y偏移：竖直偏移，正值表示向下偏移，负值表示向上偏移。
3. 模糊半径：表示阴影的模糊范围。
4. 扩散半径（可选）：正值会增加阴影的半径，负值会减少阴影的半径，设置为0时，阴影半径为模糊半径。
5. 颜色：设置阴影的颜色，如果没有显示设置该值，那么会使用text的颜色作为阴影颜色。

还可以在box-shadow值最开始处添加inset关键字，使阴影呈现在边框内部。

See the Pen 015 Box Shadow_01 by Pengfei Wang ( @AhCola) on CodePen.

可以添加多个阴影，形成叠加效果。

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

See the Pen 015 Box Shadow_02 by Pengfei Wang ( @AhCola) on CodePen.

二.text-shadow

使用text-shadow可以给文字添加阴影效果。与box-shadow类似，但是作用对象是文字。

.ele {
    text-shadow: 3px 3px 3px hotpink;
}

text-shadow接受的值与box-shadow一样。唯一不同的是，text-shadow不能设置扩散半径和inset关键字。

See the Pen 015 Box Shadow_03 by Pengfei Wang ( @AhCola) on CodePen.

和box-shadow一样，也可以给文字添加多个阴影。

.ele {
    text-shadow: 1px 1px 0px white,2px 2px 0px firebrick;
}

See the Pen 015 Box Shadow_04 by Pengfei Wang ( @AhCola) on CodePen.

三.drop-shadow

drop-shadow是一个css函数，而不是属性。用于给图片中的内容添加阴影的，对的你没有看错的确是图片里的内容。实现过程实际上是分析图片中的内容，然后在图片原有的位置上添加一个模糊的偏移的图片，达到阴影的效果。与filter属性配合使用。

.ele {
    filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow参数与box-shadow一样，但是不能设置扩散半径和inset关键字，你也可以为图片添加多个阴影。

.ele {
    filter: drop-shadow(0px 0px 10px hotpink) drop-shadow(10px 10px 20px rgba(0 0 0 / 30%))
}

See the Pen 015 Box Shadow_05 by Pengfei Wang ( @AhCola) on CodePen.

附：参考资料

• 谷歌learn css：shadows

(完)