CSS transparent border background clip

Time:2020-9-14

This article mainly introduces the background clip magic of CSS transparent border, to share with you, but also to leave a note for yourself


<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; key code

The initial value of the background clip attribute is border box, which means that the background will be cut off by the element’s border box. If we don’t want the background to intrude into the border, all we have to do is set it to padding box, so that the browser will use the outer edge of the inner margin to cut off the background

effect

Without background clip: padding box; effect
You can see that the background image is exposed by a translucent border

After adding, the background is trimmed at the border

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.