这篇文章主要讲解了“CSS透明边框属性background-clip使用有什么技巧”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

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

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

到此这篇关于“CSS透明边框属性background-clip使用有什么技巧”的文章就介绍到这了,更多相关CSS透明边框属性background-clip使用有什么技巧内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS中文字描边样式是什么，怎样使用的？

  在css样式中，有文字描边样式。可以利用“text-stroke”属性给文字元素设置描边样式，该属性可以设置文字描边的厚度和颜色，语法为“文字元素{text-stroke:width color;}”。

• CSS中常用的动画属性有什么，如何使用

  这篇文章主要介绍了css动画属性使用及实例代码(transition/transform/animation) ,需要的朋友可以参考下

• CSS如何实现Sticky Footer，具体的方法和代码是什么

  这篇文章主要介绍了CSS实现Sticky Footer的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• HTML5中body全屏背景图片怎么实现，哪些事项要注意

  这篇文章主要介绍了HTML5 body设置全屏背景图片的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS中怎么把文本右移一点，方法是什么

  在css中，可以利用transform属性和“translateX()”函数将字往右调，“translateX()”函数用于定义元素在左右平移时的位置，只需要给文字元素添加“transform:translateX(向右移动值)”样式即可。