前言
最近在做微信小程序优惠券的一个需求，然后优惠券卡片展示是不规则图形且含阴影。
如下：
正文
因为卡片有展开交互，所以高度非固定的，所以就没用切图去弄，想着用 CSS 实现，然后一顿操作：
.card { width: 100%; height: auto; margin: 24rpx 0; position: relative; border-radius: 10rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06); background: radial-gradient(circle at 0 142rpx, transparent 10rpx, #fff 0) top left, linear-gradient(0.25turn, #fff, #fff), radial-gradient(circle at 70rpx 142rpx, transparent 10rpx, #fff 0) bottom right; background-size: 10% 100%, 82% 100%, 10% 100%; background-repeat: no-repeat; background-position: 0 0, 50% 0, 100% 0; }
出来的效果如下，有瑕疵，强迫症表示受不了。
针对不规则图形，使用 filter 属性替换掉 box-shadow。（效果如图一）
{ filter: drop-shadow(0px 4rpx 12rpx rgba(0, 0, 0, 0.06)); }
其中
drop-shadow参数与box-shadow基本一致。
兼容性
在使用 filter: drop-shadow 设置阴影会导致部分 iOS 设备导致花屏。
相关链接：
