错误方案
利用 box-shadow
在面对规则的矩形或者圆形，用 box-shadow 生成的投影可以说堪称完美。
但是面对不规则图形，再用 box-shadow 生成的投影就有点力不从心了。
比如：
可以看出，这时圆角矩形的投影打到三角形上面了。在某些情况下看起来可能会有点不那么和谐。
box-shadow 不适用在伪元素和半透明的装饰上。
正确的方案
利用 css3 提供的滤镜实现（filter）
<div>Rabbit</div>
<style>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);}</style>
复制代码
这里利用伪元素生成小三角形。
京公网安备 11010502039052号
评论