本文摘自PHP中文网，作者V，侵删。
本文利用径向渐变来实现背景透明的内凹圆角。
（视频教程推荐：css视频教程）
基本线性渐变
1 2 3 4 5 6 7 | div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red, blue);
}
<div>从左到右的红到蓝渐变</div>
|
加百分比调整渐变范围
1 2 3 4 5 6 7 | div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red 20%, blue 80%);
}
<div></div>
|
浓缩渐变范围，直至重合，形成一个红蓝分隔的两个色块
1 2 3 4 5 6 7 | div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red 50%, blue 50%);
}
<div></div>
|
颜色是可以设置透明色的，transparent, 将红色改成透明色，可以看到只有蓝色的色块了
1 2 3 4 5 6 7 | div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, transparent 50%, blue 50%);
}
<div></div>
|
同理联想到径向渐变，同样缩小渐变圈，直至重合，靠近圆心的颜色设成transparent
1 2 3 4 5 6 7 8 | .raidal {
height: 100px;
width: 100px;
background:radial-gradient(transparent 50%,blue 50%);
}
<div class='raidal'></div>
|
径向渐变是可以设置半径圆心位置的，所以设到左顶角，left top 调整半径大小为 200px，就发现背景透明的内凹圆角实现了。
应用时可以用伪元素设置，然后用绝对定位，子绝父相，调整位置，组合成想要的效果
1 2 3 4 5 6 7 8 | .raidal1 {
height: 100px;
width: 100px;
background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<div class='raidal1'></div>
|
同理四个方向, 调整圆心位置即可
阅读剩余部分
相关阅读 >>
外部调用css不显示怎么办
css属性前缀的作用是什么？
css实现隐藏元素效果
css中的伪元素有什么作用
html中文本标签，超链接标签以及图像标签的简单介绍
css怎么设置背景图片布满全屏
css中tr是什么意思
css怎么把纵向排列变成横向
css box-align属性怎么用
css怎么禁止换行
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 你知道怎么利用css实现内凹圆角么
