扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
今天就跟大家聊聊有关怎么在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实现透明边框有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网