CSS3 filter滤镜drop

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196610.html

1. 一、投影
2. 二、多重投影
3. 三、使用和局限
4. 四、总结和说明

利用 drop-shadow 一行代码搞定所有不规则边框。

一、投影

这里需要利用投影 drop-shadow， 不太了解的可以参考 这篇文章: CSS 滤镜：drop-shadow，这里简单介绍一下。

语法：

filter: drop-shadow(offset-x offset-y blur-radius color)

并不是一个单独的属性，而是 filter 滤镜下的一个方法

这里 offset-x、 offset-y为偏移量，blur-radius为模糊半径，color为投影颜色。实际作用就是可以模拟真实世界的投影（透明的部分不会投影），区别如下：

这些就需要自行取舍了（一般情况下不会有太粗的边框）

四、总结和说明

本文介绍了一个实现不规则边框的通用方案，成本非常低，效果也非常不错，这里总结一下：

1. drop-shadow只会对不透明部分生成投影，符合真实物理世界
2. drop-shadow不支持多重投影，filter支持多重滤镜，可以间接实现多重投影
3. 边框的实现原理是投影的多重叠加
4. 有些通过mask裁剪生成的图形，需要在外包裹一层容器，再生成边框
5. 适合比较小的边框，过大的边框不太理想
6. 滤镜其实是一个比较耗费性能的属性，不适合太范围使用

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/