前言

“等风来不如追风去，追逐的过程就是人生的意义”。

借朋友吉言，“2018在头条，2019成为头条”，这就是我2019的目标，我已经在追风的路上。你呢？不要停下脚步，继续前行吧。

今天来个实用的小知识，看下图：

很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

语法： background: radial-gradient(shape size at position, start-color, ..., last-color);

波浪造型的产生

<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

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 8px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 ... 
 }

设置背景大小，y轴默认平铺，x轴不允许平铺，形成多个半圆，造就波浪造型。

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-repeat-x: no-repeat; 
 ... 
 }

同理，我们添加右边波浪，

.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; 
}

添加文字

<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; 
}

演示地址：CSS3径向渐变实现优惠券波浪造型

推荐文章

CSS3 box-shadow实现背景动画

从浅到深的学习 CSS3阴影(box-shadow)

CSS3线性渐变、阴影、缩放实现动画下雨效果