一、效果

效果圖.png

需要實現(xiàn)的點：
1、優(yōu)惠券樣式 （使用mask遮罩實現(xiàn)）
2、鏤空陰影效果（使用filter實現(xiàn)）
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;
    // 優(yōu)惠券陰影
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
    .good_image {
        width: 638rpx;
        height: 332rpx;
        border-radius: 20rpx;

        // 優(yōu)惠券樣式
        // 使用 mask實現(xiàn)（一行代碼解決，完美）
        -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px;

        // 使用background實現(xiàn)
        /* 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 實現(xiàn)優(yōu)惠券的技巧 https://juejin.cn/post/6945023989555134494
巧用CSS filter，讓你的網(wǎng)站更加酷炫！https://juejin.cn/post/7002829486806794276