本文摘自PHP中文网,作者V,侵删。

本文利用径向渐变来实现背景透明的内凹圆角。
(视频教程推荐:css视频教程)
基本线性渐变
1 2 3 4 5 6 7 | div {
height : 100px ;
width : 200px ;
background-image : linear-gradient( 90 deg, red , blue );
}
<div>从左到右的红到蓝渐变</div>
|
加百分比调整渐变范围
1 2 3 4 5 6 7 | div {
height : 100px ;
width : 200px ;
background-image : linear-gradient( 90 deg, red 20% , blue 80% );
}
<div></div>
|
浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块
1 2 3 4 5 6 7 | div {
height : 100px ;
width : 200px ;
background-image : linear-gradient( 90 deg, red 50% , blue 50% );
}
<div></div>
|
颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了
1 2 3 4 5 6 7 | div {
height : 100px ;
width : 200px ;
background-image : linear-gradient( 90 deg, 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 | .raidal 1 {
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实现内凹圆角么