很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。
radial-gradient()
radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。
语法： background: radial-gradient(shape size at position, start-color, ..., last-color);
值 | 描述 |
|---|---|
shape | 确定圆的类型，ellipse (默认): 指定椭圆形的径向渐变；circle ：指定圆形的径向渐变 |
size | 定义渐变的大小，farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角；closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边；closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角；farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 |
position | 定义渐变的位置，center（默认）: 设置中间为径向渐变圆心的纵坐标值；top：设置顶部为径向渐变圆心的纵坐标值；bottom：设置底部为径向渐变圆心的纵坐标值 |
start-color, ..., last-color | 用于指定渐变的起止颜色 |
波浪造型的产生
代码语言：javascript复制<div class="coupon"></div>这里用radial-gradient绘制一个圆，设置left为1px，top为8px，形成半圆。
.coupon {
position: relative;
width: 400px;
height: 160px;
margin: 50px auto;
background-image:
radial-gradient(
circle at 1px 8px,
transparent 6px,
#ff9e6d 6px,
#ff9e6d 0px);
}看看原本是这样，这里的left是8px
代码语言：javascript复制.coupon {
...
background-image:
radial-gradient(
circle at 8px 8px,
transparent 6px,
#ff9e6d 6px,
#ff9e6d 0px);
...
}设置背景大小，y轴默认平铺，x轴不允许平铺，形成多个半圆，造就波浪造型。
代码语言：javascript复制.coupon {
...
background-image:
radial-gradient(
circle at 1px 8px,
transparent 6px,
#ff9e6d 6px,
#ff9e6d 0px);
background-size: 200px 18px;
background-repeat-x: no-repeat;
...
}同理，我们添加右边波浪，
代码语言：javascript复制.coupon {
...
background-image:
radial-gradient(
circle at 1px 8px,
transparent 6px,
#ff9e6d 6px,
#ff9e6d 0px),
radial-gradient(
circle at 199px 8px,
transparent 6px,
#ff9e6d 6px,
#ff9e6d 0px);
background-size: 200px 18px;
background-position: 0 0, 200px 0;
background-repeat-x: no-repeat;
}添加文字
代码语言：javascript复制<div class="coupon">50元</div>用:before伪类，制作中间的虚线，:after伪类，添加“立即领取”文字。同时添加金额（50元）样式。
.coupon {
...
font-size: 60px;
color: #fff;
font-weight: bold;
line-height: 160px;
padding-left: 60px;
box-sizing: border-box;
cursor: pointer;
}
.coupon::before {
position: absolute;
content: "";
left: 240px;
top: 0;
bottom: 0;
width: 0;
border-left: 1px dashed #fff;
}
.coupon::after {
position: absolute;
content: "立即领取";
font-size: 26px;
width: 70px;
top: 50%;
right: 2%;
transform: translate(-50%, -50%);
line-height: 40px;
letter-spacing: 5px;
}
