filter:drop

日期:2020-09-24 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

前些天在做1个新项目的情况下,用到了黑影,黑影是个方位都有的,因而写了1大坨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也适用1点点了,因此在webkit上,能够完成更好的实际效果,为何无需呢?