热搜：编程 Python Microsoft 编程语言 C++

filter:drop-shadow有方向的阴影如何使用说明

发布时间：2023-05-25 05:43:45 来源：互联网

.

雪花徐徐飘下，如芦花，似柳絮，像轻悠悠的鹅毛，无尽无休地飘着，飘着，宛如那美丽的银蝶在院中翩翩起舞，又像一群穿白纱裙的小舞女，伴着天空传来的仙乐，轻轻盈盈地在空中飘舞着，旋转着，跳着动人的舞蹈。那么轻快的身影，那么飘逸的舞姿，每一片晶莹的雪花都像一曲婉转、悠扬、清新的轻音乐，都仿佛是一首轻快、和谐、明丽的小诗。哦，神奇的小雪花……

前些天在做一个项目的时候，用到了阴影，阴影是个方向都有的，于是写了一大坨box-shadow来实现，然后今天看到bricss说到filter:drop-shadow，豁然开朗。
具体的实现不用不细讲了，直接看代码：
box-shadow方案：

复制代码

代码如下:

.box-shadow {
box-shadow: rgba(0,0,0,.5) 0 1px 5px;
}

drop-shadow滤镜方案：

复制代码

代码如下:

.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}

效果对比：

关于drop-shadow这个滤镜：

不了解filter的同学请访问：-webkit-filter是神马？
chrome从21版本开始支持（现在主流版本是22），Safari 6和ios 6中Safari也都支持
firefox、Opera、ie继续用box-shadow吧
filter规范现在由webkit和adobe在推，firefox在跟进，ie10也支持一点点了，所以在webkit上，可以实现更好的效果，为什么不用呢？

到此这篇关于filter:drop-shadow有方向的阴影如何使用说明就介绍到这了。人在世上，恩一定要报，仇可以不报，因为因果自有循环，但帮你的人一定要让他有回报。更多相关filter:drop-shadow有方向的阴影如何使用说明内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： filter drop