针对不规则图案阴影 drop-shadow

最近在做微信小程序优惠券的一个需求，然后优惠券卡片展示是不规则图形且含阴影。

如下：

因为卡片有展开交互，所以高度非固定的，所以就没用切图去弄，想着用 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 设备导致花屏。

相关链接：

• wx:for 渲染列表时在 iPhone X 出现重复数据？
• 小程序踩坑记之——花屏/重复渲染数据
• iOS 真机下动态修改 filter:drop-shadow 导致的渲染异常问题