CSS3实现内凹圆角的实例代码，【干货】

可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。

这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

1. 基本线性渐变

div {

height:100px;

width:200px;

background-image:linear-gradient(90deg,red,blue);

}

从左到右的红到蓝渐变

2. 加百分比调整渐变范围

div {

height:100px;

width:200px;

background-image:linear-gradient(90deg,red 20%,blue 80%);

}

3. 浓缩渐变范围，直至重合，形成一个红蓝分隔的两个色块

div {

height:100px;

width:200px;

background-image:linear-gradient(90deg,red 50%,blue 50%);

}

<