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

雪花徐徐飘下,如芦花,似柳絮,像轻悠悠的鹅毛,无尽无休地飘着,飘着,宛如那美丽的银蝶在院中翩翩起舞,又像一群穿白纱裙的小舞女,伴着天空传来的仙乐,轻轻盈盈地在空中飘舞着,旋转着,跳着动人的舞蹈。那么轻快的身影,那么飘逸的舞姿,每一片晶莹的雪花都像一曲婉转、悠扬、清新的轻音乐,都仿佛是一首轻快、和谐、明丽的小诗。哦,神奇的小雪花……
前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,于是写了一大坨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有方向的阴影如何使用说明内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
CSS3 filter(滤镜)如何实现网页灰色或者黑色模式的示例代码

css中filter属性和backdrop-filter的应用与区别详解

通过css3的filter滤镜改变png图片的颜色的示例代码

详解CSS3中强大的filter(滤镜)属性

如何使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE