核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
在开始些样式前，先在html代码放个div标签即可。
<div class="block"></div>
内凹圆角
使用一个固定大小且完全透明的圆做径向渐变至目标色值，通过控制中心点与结束点来实现目标形状。
效果：
css代码：
.block {width: 200px;height: 200px;background-image: radial-gradient(circle 200px at 100% 0, transparent 200px, #000 50%);}
月亮
先以圆为基础图形，在上方图形的实现基础上控制径向大小与中心点
效果：
CSS代码：
.block {width: 200px;height: 200px;border-radius: 50%;position: relative;background-image: radial-gradient(circle 160px at right 0, transparent 160px, yellow);}
拼图块
凹槽在top、bottom、left、right任一边绘制一个全透明圆形径向渐变，凸角在任一边绘制一个圆形向外偏移自身50%个单位即可
效果：
css代码：
.block {width: 200px;height: 200px;position: relative;&::before,&::after {content: ' ';position: absolute;}&::before {top: 0;left: 0;width: 100%;height: 100%;background-image: radial-gradient(circle 40px at top, transparent 40px, green);}&::after {top: 50%;right: 0;transform: translate(50%, -50%);width: 80px;height: 80px;border-radius: 50%;background-color: green;}}
优惠券
对边绘制一个全透明圆形径向渐变的凹槽
效果：
css代码：
.block {width: 200px;height: 100px;position: relative;&::before,&::after {content: ' ';position: absolute;top: 0;width: 50%;height: 100%;}&::before {left: 0;background-image: radial-gradient(circle 10px at left, transparent 10px, #fc5532 50%);}&::after {right: 0;background-image: radial-gradient(circle 10px at right, transparent 10px, #fc5532 50%);}}
横向优惠券
相比上方的优惠券图形，凹槽方向改为上下向左偏移，增加了圆角和线条
效果：
html代码增加一个div用来绘制虚线
<div class="block"><div class="line"></div></div>
css代码：
.block {width: 200px;height: 100px;position: relative;&::before,&::after {content: ' ';position: absolute;left: 0;width: 100%;height: 50%;}&::before {top: 0;background-image: radial-gradient(circle 10px at 80px top, transparent 10px, #fc5532);border-radius: 10px 10px 0 0;}&::after {bottom: 0;background-image: radial-gradient(circle 10px at 80px bottom, transparent 10px, #fc5532);border-radius: 0 0 10px 10px;}.line {position: absolute;z-index: 1; // 必要，否则会被父布局的block::after内容遮住top: 10px;bottom: 10px;left: 79px;border: 1px dashed #fff;}}
