纯css实现内凹圆形
1. 单个透明内凹半圆：
以下就是两个div嵌套的真实效果，可以开启查看元素，调整内div层的各项数值查看对应的效果：
代码如下：
<div style="background-color: red; width: 300px; height: 100px; padding-top: 100px;"> <div style="width: 300px; height: 100px; background-image: radial-gradient(circle at 50% -3px, transparent 46px, rgba(255, 255, 255, 0.8) 0);"></div> </div>
注：调整内层div背景样式中的各数值，可以调整半圆的直径大小、半圆的位置、边框是否虚化等，可以直接在上边实例开启查看元素查看实时效果。
个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt