分享一个类优惠券样式-带内圆角，带阴影

原创

已于 2024-03-01 14:29:25 修改 · 520 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2021-05-20 17:43:42 首次发布

本文介绍了如何使用CSS的drop-shadow和径向渐变来创建带有内圆角和阴影效果的优惠券样式，包括解决不规则内圆角下方阴影的挑战，以及详细展示实现此效果的代码步骤。通过这种方法，可以在前端开发中避免切图，提高布局灵活性。

更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

在前端日常开发排版布局过程中，虽然万物都可切图搞定，但是难免会不太灵活，所以针对一些不太常见的设计样式，如下图这种类似优惠券的一种样式，如果能有方式在代码层面搞定，尽量还是不要选择切图了。

乍一看感觉也没什么难度，仔细一看，才发现事情并不简单。

通常想要实现这种内圆角的效果，首先想到的就是使用背景渐变来实现，但这边比较麻烦的点在于，不规则的内圆角下面的阴影。

进过一番尝试，最终使用drop-shadow + 背景径向渐变实现了该样式。

drop-shadow

一般，设置盒子的投影，我们使用的属性是box-shadow，但是该属性比较死板，如下图：想要实现连同小箭头也有阴影效果，这个属性就不能满足条件了。

.dialog-box {
    width: 150px;
    height: 50px;
    border-radius: 4px;
    position: relative;
}

.dialog-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent transparent white transparent;
    bottom: 100%;
    right: 10px;
}

//使用box-shadow
.dialog-box-shadow