css 透明边框background-clip妙用

(编辑：jimmy 日期: 2024/11/28 浏览：3 次 )

本篇文章主要介绍了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; 效果
可以看出背景图被半透明边框透出来了

加了之后,背景在边框部位就被裁减了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解CSS3新增的背景属性
下一篇：浅析css中使用border属性与display属性的方法