「这是我参与11月更文挑战的第三天，活动详情查看：2021最后一次更文挑战」。

往期链接:

「CSS奇技淫巧之滤镜」

前言

上一章介绍了filter的blur、brightness和contrast三个属性,相信你看过后是不是有觉得一丢丢的神奇（如果你还没看过的话，可以点击开头的这里哦「CSS奇技淫巧之滤镜」）。

没想到css3还有这么神奇的功能，这不禁让我想起了，当年在校园里学的ps了呢，一些在ps上可能需要好几步才能完成的操作，在css3 里面，可能只需要一行代码，就完全可以替代ps 的效果，可以想象开发css3的工程师，可以说是恐怖如斯。

好了，废话不多说了，开始我们的正题，我们今天呢，要说的是他的另一个属性drop-shadow。

filter

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

我是小字，小字，神奇的发现掘金的编辑器支持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！！！