本文摘自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文件？（代码示例）
input实现文字超出省略号（代码示例）
css 图像不重复怎么设置
css圆角属性是什么
怎么保存css样式
css怎么设置图片拉伸不重复
css怎么设置链接样式
css怎么让连续数字字母换行
html中是如何引入css样式？以及link与@import的区别（代码实例）
5款实用css 3d特效，让你的页面更惊艳！
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 你知道怎么利用css实现内凹圆角么
