The Secret of CSS Learning (a) translucent border

1. Knowledge points
HSLA color: HSLA (h,s,l,a), Value: H:hue (hue). 0 (or 360) indicates red, 120 is green, 240 is blue, and other values are preferred to specify the color. The value is: 0–360;s:saturation (saturation). Values are: 0.0%-100.0%;l:lightness (brightness). Values are: 0.0%-100.0%;a:alpha transparency. Value between 0~1.
2.html code: <div class= "Box1" ></div>
3.CSS Code:

body{
background:red;
}
. box1{
width:30px;
height:30px;
Background:white;
border:10px solid Hsla (0,0%,100%,.5);
}
4. Running effect:, this does not look like a border, as if it is all content, but in fact, he has a border,. What is the reason for this?
reason : The body background does not penetrate from the translucent white border, but the translucent white border reveals the container's own solid white background, which actually get the effect of pure white solid color of the border looks exactly the same. By default, the background extends to the lower part of the bounding area of the border.
5. Workaround: Add a sentence in the CSS code:background-clip:padding-box;
6. Achieve the effect:
7. Supplemental Knowledge: The Background-clip attribute specifies the drawing area of the background.

Border-box: The background is clipped to the bounding box;
Padding-box: The background is clipped to the inner margin box;

Content-box: The background is clipped to the content box.

The Secret of CSS Learning (a) translucent border