CSS3实现内凹圆角的实例代码，大厂经典高频面试题体系化集合

div {

height:100px;

width:200px;

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

}

4. 颜色是可以设置透明色的，transparent, 将红色改成透明色，可以看到只有蓝色的色块了。

div {

height:100px;

width:200px;

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

}

5. 同理联想到径向渐变，同样缩小渐变圈，直至重合，靠近圆心的颜色设成transparent。

/* 径向渐变主体 */

.raidal {

height:100px;

width:100px;

background:radial-gradient(transparent 50%,blue 50%);

}

6. 径向渐变是可以设置半径圆心位置的，所以设到左顶角，left top 调整半径大小为 200px，就发现背景透明的内凹圆角实现了。

应用时可以用伪元素设置，然后用绝对定位，子绝父相，调整位置，组合成想要的效果

/* 径向渐变主体 */

.raidal1 {

height:100px;

width:100px;

background:radial-gradient(