纯css实现内凹圆形

 1. 单个透明内凹半圆：

以下就是两个div嵌套的真实效果，可以开启查看元素，调整内div层的各项数值查看对应的效果：

内层div

html代码如下：

<div style="background-color: red; width: 300px; height: 100px; padding-top: 100px;">
    <div style="width: 300px; height: 100px; background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);"></div>
</div>

注：调整内层div背景样式中的各数值，可以调整半圆的直径大小、半圆的位置、边框是否虚化等，可以直接在上边实例开启查看元素查看实时效果。

关键样式代码：

background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);

解析： radial-gradient 这里有三个参数，分别表示圆形径向渐变方向 | 渐变开始 | 渐变结束。

第一个参数 circle at 50% 0 这里50%表示横向居中，0表示在顶部；circle at定义圆形径向渐变方向，也可以设置为left/right/top/bottom；

第二个参数 transparent 50px 表示从顶部中间位置开始以50像素为半径的圆开始径向渐变，数值可以调整圆的大小；

第三个参数 yellow 0) 表示径向渐变以黄色结束；后边的0最大可以取到50像素（圆的半径）对圆无影响，如果再大圆就会出现模糊效果，感兴趣的可以试试。 

2.左右两个半圆实例如下：

 

html代码如下：

<div style="width: 300px;height: 200px;background: radial-gradient(circle at left,transparent 10px,  red 0) left,radial-gradient(circle at right,transparent 10px, red 0) right;background-repeat: no-repeat;background-size: 50% 100%;">
</div>

关键样式代码：

background: radial-gradient(circle at left,transparent 10px,  red 0) left,
　　　　　　　radial-gradient(circle at right,transparent 10px, red 0) right;
background-repeat: no-repeat;
background-size: 50% 100%;

解析：

这里采用了两个圆形径向渐变，以 background-size: 50% 100% 进行左右分割；

同时也要设置 background-repeat: no-repeat ，不然左右两半部分的渐变会相互覆盖就没有半圆效果了。

3. 上下两个半圆：

 

关键样式代码：

background: radial-gradient(circle at top,transparent 10px,  red 0) top,
　　　　　　　radial-gradient(circle at bottom,transparent 10px, red 0) bottom; 
background-repeat: no-repeat; 
background-size: 100% 50%;

4. 更多的效果：

 

 代码：

background: radial-gradient(circle at top,transparent 50px,  red 55px) top,
　　　　　　  radial-gradient(circle at 50% 50% ,transparent 30px, red 35px) center,
　　　　　　　radial-gradient(circle at 50%,transparent 10px, red 20px) bottom; 
background-size: 100% 34%;
background-repeat: no-repeat; 

当然，如果你想，还可以用径向渐变实现更多炫酷的效果，现在的智能设备更新换代比较快，现在已经很少考虑兼容行问题了，大部分设备都支持css3的，感兴趣的可以多多尝试哦！

如果有其他好的建议，也欢迎评论留言。

注：以上实例均直接以html代码+css实现，目前已经调整到发布后可以正常显示的效果。如果后续显示不正常，那有可能是平台改了规则，某些代码被屏蔽了。