之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。
布局
布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。
看上图，而这里，我们就只是最简单的布局方式，从上而下：
1、优惠券金额和过期时间
2、优惠券描述
3、按钮（其实按钮也可以放到“2”里面去）
这样分析，我们就有了 html 架构了
100元
优惠券
2020-12-31 18:18:18过期
1、商城、美食可用
2、过期作废
CSS修饰
接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。
1、优惠券金额和过期时间样式
这里的核心就是上方的凹槽和下方的锯齿
.coupon{
background-color: #E0E0E0;
width: 200px;
/* css变量 */
--main-color: #EC407A;
--f-color: #444;
}
.price {
position: relative;
height: 120px;
background-image: radial-gradient(
circle at 100px -8px, #fff 20px, var(--main-color) 21px
);
color: #fff;
font-size: 20px;
text-align: center;
padding-top: 40px;
}
.price .timeout{
color: var(--f-color);
font-size: 14px;
margin-top: 25px;
}
.price span{
font-size: 14px;
}
这里用到了 径向渐变，不清楚用法的小伙伴可以看看语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
注释：
（1）、shape 确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
（2）、size 定义渐变的大小，可能值：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
（3）、position 定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
（4）、start-color, ..., last-color 用于指定渐变的起止颜色。
这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用 径向渐变 的方式实现：
.price::after{
position: absolute;
content: '';
display: block;
bottom: 0px;
height: 10px;
width: 100%;
/* background-size: 11px 200px; */
background-image:
radial-gradient(
circle at 5px 10px,
#E0E0E0 6px,
var(--main-color) 7px);
}
伪类元素 ::after 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。
其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：
.price::after{
position: absolute;
content: '';
display: block;
bottom: -5px;
width: 100%;
border-bottom: 10px dotted #E0E0E0;
}
当然也有缺陷，间隔位置不好控制
2、优惠券描述与按钮 优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯
.describe{
color: #333;
padding: 10px;
font-size: 14px;
}
.btns {
/* 使其button可以居中 */
text-align: center;
}
.btns button{
/* 重置按钮样式 */
border: none;
box-shadow: none;
outline: none;
background-color: var(--main-color);
color: #fff;
width: 50%;
border-radius: 20px;
line-height: 30px;
margin: 40px 0 20px;
cursor: pointer;
}
主题颜色
大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .coupon 类选择器里面的。这样的原因是：
1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）
2、方便主题使用
ok，我们就可以copy 多个 优惠券，并给每个添加一个不同的 class，比如下方的 theme1、theme2、theme3
...
...
...
...
接下来我们就为不同主题定义不同的颜色变量
.coupon.theme1{
--main-color: #8E24AA;
--f-color: #fff;
}
.coupon.theme2{
--main-color: #039BE5;
--f-color: #fff;
}
.coupon.theme3{
--main-color: #26A69A;
--f-color: #fff;
}
这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色（红色）。
小结
今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。