Chapter 2 Transparent Border of Background & amp; Borders, Chapter 2 background

Chapter 2 Transparent Border of Background & Borders; chapter 2 background
1. Translucent (Translucent) border

The first example in Chapter 2 is to implement a translucent border. The effect is as follows:

At first glance, it's very easy. The boder is just done. The Code is as follows:

Border: 10px solid hsla (0, 100%,. 5 );

Background: white;

However, this does not work at all. The effect is that border is missing ....

 

Sorry... what's going on? Originally, border did not disappear. Our background: white covered the border-_-, so we only need to change the width of the background to the padding of the box.

 

After the background: white is removed, the border of the box is clearly displayed.

 

The background attribute is overwritten by default by border-box. to modify it, you can use the background-clip attribute (IE9 + ):

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

After adding background-clip: padding-box to the box, we can achieve the desired effect.