CSS transparent border background-clip magic

This article mainly introduces the wonderful use of CSS transparent border background-clip, share it with everyone, and 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 property is border-box, which means that the background will be clipped by the element's border box (the outer edge of the border). If we don't want the background to invade the border, all we have to do is set its value 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;, we can see that the background image is visible through the semi-transparent border.

After adding it, the background is cut off at the border.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.