在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本篇文章主要介绍了css 透明边框background-clip妙用,分享给大家,也给自己留个笔记 <div class="border"></div> .border { width: 300px; height: 300px; background: url("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg"); background-size: cover; margin-left: 100px; border: 10px solid rgba(255,255,255,.6); background-clip: padding-box; } background-clip: padding-box; 重点代码 background-clip 这个属性的初始值是 border-box,意味着背景会被元素的 border box(边框的外沿框)裁切掉。如果不希望背景侵入边框所在的范围,我们要做的就是把它的值设为 padding-box,这样浏览器就会用内边距的外沿来把背景裁切掉 效果 不加background-clip: padding-box; 效果 加了之后,背景在边框部位就被裁减了 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论