css 透明边框background-clip妙用

本篇 文章 主要介绍了css 透明边框background-clip妙用，分享给大家，也给自己留个笔记

<div class="border"></div>

.border {  
  width: 300px;  
  h ei ght: 300px;  
  background: url("https://w ai qin.oss-cn -s henzhen.aliyuncs .COM /jxb-vip -t s/activ IT ys/activitys15677540269589t img . jpg ");  
   background-size : cover;  
  m arg in-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; 效果
可以看出背景图被 半 透明边框透出来了

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

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

总结

以上是 为你收集整理的 css 透明边框background-clip妙用 全部内容，希望文章能够帮你解决 css 透明边框background-clip妙用 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css 透明边框background-clip妙用的详细内容...