序言
巨头给了1张优惠券照片(以下图)，我1看，这波浪纹型的边框和内倒角用css写不出来吧，遂向巨头表明并要ui切图，巨头回应：css3能够完成。好吧，巨头都说能够完成了，还不赶快去求谷哥，度娘。
完成内倒角
上编码，随后解释编码
<div class="radial-gradient"></div>
<style>
.radial-gradient {
width: 200px;
height: 100px;
position: relative;
background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
}
</style>
.radial-gradient的款式无需解释，懂点css都了解。重要在于.radial-gradient:after款式。
关键解释radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)这个款式是干吗的。
circle表明圆形渐变色，说的简易点便是画1个圆。画圆就要了解原点。
circle at right top 中的right top便是原点部位。这里原点部位是相对器皿的座标。right表明器皿最右侧，top表明器皿最上边，换言之便是右上角。
circle at right top 后边的#fff, #fff 10px, transparent 11px便是从原点刚开始各种各样色调渐变色的长度。
编码#fff, #fff 10px, transparent 11px中第1个#fff表明原点处为#fff色调，#fff 10px表明间距原点半径10px这段间距全是#fff色调，transparent 11px表明间距原点10px到11px全是transparent色调，因为沒有设定别的色调，因此间距原点11px之后全是transparent色调。
总结radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),便是以器皿的右上角为原点画圆，半径10px范畴内是#fff色调，半径超过10px范畴内全是transparent色调。
这样在右上角就产生了内倒角
同理 radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解释了。
完成波浪纹边框
上编码，提升1个css款式便可
<style>
.radial-gradient:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: ⑸px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
background-size: 10px 10px;
}
</style>
background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); 此处沒有 at right top字样，表明原点在器皿管理中心部位，#fff, #fff 4px, transparent 5px，表明半径4px范畴内是#fff色调，半径超过4px范畴内全是transparent色调。这样就有1个直径为8px的#fff色调的圆坐落于器皿(这里的器皿是:after)管理中心。
(情况蓝色是以便演试实际效果)
再再加background-size: 10px 10px;设定情况尺寸为宽10px高10px，这样就可以完成好几个直径为8px的#fff色调的圆。
(情况蓝色是以便演试实际效果)
left: ⑸px; 向左偏位 5px，使:after仅有1半在.radial-gradient器皿内
最终附上实际效果图
总结
完成内倒角实际上是画1个#fff色调的圆，圆仅有4分之1在器皿内 完成波浪纹边框实际上是画好几个#fff色调的圆，圆仅有1半在器皿内
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。