css3 filter:drop-shadow和box-shadow区别
一、filter:drop-shadow
drop-shadow是css3新特性,用于单层投影,为什么说是投影呢,用drop-shadow做投影与灯源下的物体投影更为相似。投影不能叠加。
用法:
filter:drop-shadow(x偏移,y偏移,模糊度,色值);
filter:drop-shadow(10px 10px 5px black);
兼容:
二:box-shadow
css3新特性,用于增加阴影边框,可以多个阴影叠加
用法:
box-shadow: x偏移 y偏移 模糊度 色值;
box-shadow:10px 10px 5px black;
box-shadow: inset 5px 5px 10px blcak; // 支持内阴影
内阴影:
兼容:
三、区别
1.阴影与投影的区别,box-shaow为盒阴影,可叠加阴影。drop-shadow为滤镜投影,不可叠加。
box-shaow: 5px 5px 10px black;
filter: drop-shadow(5px 5px 10px black);
四:发现有趣实例:
<div class="douyin"></div>