资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在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://cdkjz.cn/article/dcgsps.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220