【CSS】不规则阴影

微信订阅号：Rabbit_svip

微信订阅号：Rabbit_svip

解决方案滑到最下方~

---

错误方案 —— 利用box-shadow

在面对规则的矩形或者圆形，用box-shadow生成的投影可以说堪称完美。
但是面对不规则图形，再用box-shadow生成的投影就有点力不从心了。

比如：

微信订阅号：Rabbit_svip

可以看出，这时圆角矩形的投影打到三角形上面了。在某些情况下看起来可能会有点不那么和谐。

box-shadow不适用在伪元素和半透明的装饰上。

---

正确的方案 —— filter

HTML代码

<div>Rabbit</div>

CSS代码

div {    text-align: center;    line-height: 200px;    font-size: 40px;    color: #cffdf8;    width: 200px;    height: 200px;    position: relative;    background: #216583;    border-radius: 20px;    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.6));
}div:after {    content: '';    display: block;    width: 30px;    height: 30px;    background: #216583;    position: absolute;    z-index: -999;    right: -15px;    top: 20%;    transform:rotate(45deg);
}

微信订阅号：Rabbit_svip

这里利用伪元素生成小三角形。

作者：滑滑兔
链接：https://www.jianshu.com/p/4bc7b10c7865