四川盐亭网站制作公司

怎么在css中使用background-clip实现透明边框-创新互联

今天就跟大家聊聊有关怎么在css 中使用background-clip实现透明边框，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联公司是一家集网站建设,曲麻莱企业网站建设,曲麻莱品牌网站建设,网站定制,曲麻莱网站建设报价,网络营销,网络优化,曲麻莱网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
.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实现透明边框

看完上述内容，你们对怎么在css 中使用background-clip实现透明边框有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


网站标题：怎么在css中使用background-clip实现透明边框-创新互联
文章网址：http://scyanting.com/article/dcgsps.html

其他资讯