首页 前端知识 CSS3实现内凹圆角的实例代码,大厂经典高频面试题体系化集合

CSS3实现内凹圆角的实例代码,大厂经典高频面试题体系化集合

2024-06-26 23:06:31 前端知识 前端哥 169 292 我要收藏

div {

height:100px;

width:200px;

background-image:linear-gradient(90deg,red 50%,blue 50%);

}

4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。

div {

height:100px;

width:200px;

background-image:linear-gradient(90deg,transparent 50%,blue 50%);

}

5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。

/* 径向渐变主体 */

.raidal {

height:100px;

width:100px;

background:radial-gradient(transparent 50%,blue 50%);

}

6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。

应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果

/* 径向渐变主体 */

.raidal1 {

height:100px;

width:100px;

background:radial-gradient(

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13663.html
标签
评论
发布的文章

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!