本文摘自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>
|
同理四个方向, 调整圆心位置即可
阅读剩余部分
相关阅读 >>
css内边框线怎么设置
img元素可以用css吗
如何利用css改变浏览器滚动条样式
在css中怎么给按钮添加背景图片(详解及实例)
css的span是什么意思
在线演示一个全屏切换效果实例
vue框架是什么
css中border是什么意思
css如何添加滚动条
css如何设置背景透明
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 你知道怎么利用css实现内凹圆角么