往期链接:

「CSS奇技淫巧之滤镜」

前言

上一章介绍了 filter 的 blur、brightness 和 contrast 三个属性,相信你看过后是不是有觉得一丢丢的神奇，没想到 css3 还有这么神奇的功能。我们今天呢，要说的是他的另一个属性 drop-shadow。

filter

依照惯例，我们先来一张原图

<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dbc2320c79340768f8adf8066adedd3~tplv-k3u1fbpfcp-zoom-1.image">

我是小字，小字，神奇的发现掘金的编辑器支持 HTML 标签，通过 HTML 编写的图片是没有图片的。

// html<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58bccb7dbd7d4a4e81d21d05b1cff64c~tplv-k3u1fbpfcp-zoom-1.image">

drop-shadow

在图像后方生成阴影。类似于box-shadow，不过box-shadow是在元素的整个框后面创建一个矩形阴影,而drop-shadow则是创建一个图像本身形状的阴影，所以理论情况下drop-shadow性能更好一点。

.filter {    filter: drop-shadow(0 0 0.75rem #eee);}

可以看到产生了如上图的效果。

filter：drop-shadow(offset-x blur-radius spread-radius color)

他接收四个参数:

• offset-x：设置水平方向上的阴影，负值为元素左侧，正值为元素右侧，值为 0 时，则在元素后面。

• blur-radius：设置阴影的模糊半径。值越大，阴影就越大，也就是越模糊，反之亦是如此。默认值是 0。

• spread-radius：设置阴影的扩展半径。正值扩大，负值变小。默认值是 0.

• color：设置阴影的颜色。今天学到一个颜色，crimson：深红色。(^o^)

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！