针对不规则图案阴影 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 设备导致花屏。

相关链接:

推荐阅读更多精彩内容