CSS 实现带阴影的自定义图片优惠券样式

一、效果

效果图.png

需要实现的点：
1、优惠券样式 （使用mask遮罩实现）
2、镂空阴影效果（使用filter实现）
3、商品图片由后端返回

二、代码

.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