一、效果
效果图.png
需要实现的点：
1、优惠券样式 （使用mask遮罩实现）
2、镂空阴影效果（使用filter实现）
3、商品图片由后端返回
二、代码
<view class="good_image-box">
<image src="../../../../static/image/1-1.png" mode="aspectFill" class="good_image"/>
</view>
.good_image-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 18rpx;
// 优惠券阴影
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
.good_image {
width: 638rpx;
height: 332rpx;
border-radius: 20rpx;
// 优惠券样式
// 使用 mask实现（一行代码解决，完美）
-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px;
// 使用background实现
/* background: radial-gradient(circle at 0 50%, transparent 15px, #fe8864 16px) top left, linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 18px 50%, transparent 15px, #FE5151 16px) bottom right;
background-size: 20px 100%, 600px 100%, 20px 100%;
background-repeat: no-repeat;
background-position: 0px 0px,19px 0px, 618px 0px;
border-radius: 20rpx;
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));*/
}
}
三、参考文章
CSS 实现优惠券的技巧 https://juejin.cn/post/6945023989555134494
巧用CSS filter，让你的网站更加酷炫！https://juejin.cn/post/7002829486806794276
