一、效果
效果圖.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
