本文摘自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>
|
同理四个方向, 调整圆心位置即可
阅读剩余部分
相关阅读 >>
html实现自动清理js、css文件的缓存
css的语法结构是什么？
css怎么设置全屏背景图片
css怎么写圆形
div标签：水平居中和垂直居中的实现（附代码）
如何解决eclipse css乱码问题
vue的源码解析（代码示例）
如何使用css设置框架内文本的垂直位置
css中的文本属性有哪些
css怎么实现两端对齐
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 你知道怎么利用css实现内凹圆角么
