微信订阅号：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
这里利用伪元素生成小三角形。
HTML与CSS 目录：HTML与CSS
上一篇：【CSS】翘边阴影
下一篇：【CSS】不规则阴影
