公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

CSS box-shadow属性和drop-shadow过滤器的比较

关于CSS box-shadow 属性和 drop-shadow 过滤器之间的差异与优劣的话题已经不是新鲜事了,box-shadow属性出现得比较早,它被现代浏览器广泛支持。而drop-shadow是从SVG中引入CSS的,目前已经被Chrome、Firefox 和 Safari浏览器支持。box-shadow和drop-shadow实现的阴影效果是相同的,甚至它们的语法都基本类似。但是仔细观察,会发现它们之间有着显著的差异:

.shadowCSS { 
    box-shadow: 12px 12px 7px rgba(0,0,0,0.5);
}
.shadowfilter { 
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: url(shadow.svg#drop-shadow);
}

CSS box-shadow属性和drop-shadow过滤器的比较_www.uibq.com

border-image:url(gold-picture-frame.png) 81 83 82 84;
border-width: 60px;
filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

filter 阴影效果都遵从元素的精确外轮廓,甚至是32位和16位的PNG图片,就如上面的显示结果一样。box-shadow 体现的是图像的矩形轮廓,而忽略它们的alpha遮罩层。filter阴影则是会反映出透明PNG图像的外轮廓。

上面的图像使用 border-images 来制作另一个PNG图片的外边框,你可以看到阴影是不规则的,和外边框形状相吻合的阴影效果。

drop-shadow 过滤器会顾及元素的伪元素,如:before和:after。看下面纯CSS制作的信息提示框的例子,注意两种方法的提示框下面的小三角形的阴影区别。

CSS box-shadow属性和drop-shadow过滤器的比较_www.uibq.com

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3)); 
filter: url(shadow.svg#drop-shadow);

CSS box-shadow属性和drop-shadow过滤器的比较_www.uibq.com

box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

drop-shadow过滤器的局限性

下面列举了一下drop-shadow过滤器的缺点:

  • dropshadow过滤器需要四个spread值来支撑阴影效果(box-shadow属性亦是如此),但是Webkit内核的浏览器在解析这四个值时有可能会发生解析错误而导致无阴影效果。

  • dropshadow过滤器不支持inset值,所以不能通过它来轻易创建内阴影效果。

两种阴影效果的特性差异

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)