Chapter II Background & Borders Transparent Border

1.Translucent (Translucent) Border

The first example in chapter two is to implement a translucent border. The effect is as follows:

At first glance, it is very simple, boder is done, the code is as follows:

border:10px solid Hsla (0,0%,100%,.5);

Background:white;

But this does not work at all, the effect is border disappeared ....

Hey... What's the hell? Originally, border did not disappear at all, our background:white border to cover the-_-, so as long as a way to change the width of background to the box of the inner margin padding on the line

After removing the background:white, you can clearly see the box's border.

The Background property, by default, is overwritten to Border-box, and you want to modify it by Background-clip property (ie9+):

Background-clip:content-box|padding-box|content-box

It's a clang. So when we add background-clip:padding-box to the box, we get the effect we want.

Chapter II Background & Borders Transparent Border