参考了张鑫旭大神的博客,然后自己写了demo。
box-shadow与filter:drop-shadow对比,通过一张图可以看出
filter: drop-shadow:
box-shadow:
细微差别就是,box-shadow算阴影的时候,并没有将伪元素生成的三角算在元素内,而filter:drop-shadow是将伪元素囊括在内的。
下面是代码:
结构:
<div class="box">drop-shadow</div>
样式:
body {
background-color: #0cf;
}
.box {
position: relative;
margin: 80px auto;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: #fff;
/* box-shadow: -3px 5px 3px 1px #666; */
filter: drop-shadow(-3px 5px 1px #666);
}
.box:before {
content: "";
position: absolute;
left: -30px;
top: 50%;
width: 0;
height: 0;
transform: translateY(-50%);
border-width: 15px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}