# 阴影 *css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容,你将学会如何使用这些方式,知道它们各自的用途。* ## 一.`box-shadow` `box-shadow`是比较常用的一个属性,可以为元素边框周围添加一层阴影效果。 ```css .ele { box-shadow: 5px 5px 20px 5px #000; } ``` `box-shadow`接受的值,按照从左至右的顺序依次表示: 1. x偏移:水平偏移,正值表示向右偏移,负值表示向左偏移。 2. y偏移:竖直偏移,正值表示向下偏移,负值表示向上偏移。 3. 模糊半径:表示阴影的模糊范围。 4. 扩散半径(可选):正值会增加阴影的半径,负值会减少阴影的半径,设置为0时,阴影半径为模糊半径。 5. 颜色:设置阴影的颜色,如果没有显示设置该值,那么会使用text的颜色作为阴影颜色。 还可以在`box-shadow`值最开始处添加`inset`关键字,使阴影呈现在边框内部。 可以添加多个阴影,形成叠加效果。 ```css .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; } ``` ## 二.`text-shadow` 使用`text-shadow`可以给文字添加阴影效果。与`box-shadow`类似,但是作用对象是文字。 ```css .ele { text-shadow: 3px 3px 3px hotpink; } ``` `text-shadow`接受的值与`box-shadow`一样。唯一不同的是,`text-shadow`不能设置扩散半径和`inset`关键字。 和`box-shadow`一样,也可以给文字添加多个阴影。 ```css .ele { text-shadow: 1px 1px 0px white,2px 2px 0px firebrick; } ``` ## 三.`drop-shadow` `drop-shadow`是一个css函数,而不是属性。用于给图片中的内容添加阴影的,对的你没有看错的确是图片里的内容。实现过程实际上是分析图片中的内容,然后在图片原有的位置上添加一个模糊的偏移的图片,达到阴影的效果。与[filter](http://pengfeixc.com/blogs/css/css-filter)属性配合使用。 ```css .ele { filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%)) } ``` `drop-shadow`参数与`box-shadow`一样,但是不能设置扩散半径和`inset`关键字,你也可以为图片添加多个阴影。 ```css .ele { filter: drop-shadow(0px 0px 10px hotpink) drop-shadow(10px 10px 20px rgba(0 0 0 / 30%)) } ``` (完)