Some interesting CSS questions (II) -- about the box model and css box from the implementation of the striped border
In this series, we will discuss some interesting CSS questions. Aside from practicality, some questions will be discussed to broaden the ideas for solving the problem. In addition, they will involve CSS details that are easy to ignore.
Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.
Update, update, and update important things three times.
All questions are summarized in my Github.
2. How many implementation methods can be used to use only one label, similar to the following figure:
Assume that our single tag isdiv
:
<div></div>
The general CSS is defined as follows:
div{ position:relative; width: 180px; height: 180px;}
This question mainly examines the box model.Box Model
And backgroundbackground
And usebackground-clip
Changes the filling mode of the background.
background
InBox Model
Is filled with the entire element of the box area, not frompadding
Internal (that is, it starts from border), but the solid line border (solid) partially Blocksbackground
So we can see that the background color is fromborder
Internal.
We givediv
Add the following style:
div{ background:#9c27b0; border:20px dashed #2196f3;}
The result is as follows:
Note that,background-color
Is from the upper left corner of the element's border to the lower right corner, andbackground-image
But not frompadding
From the upper left corner of the edgeborder
At the bottom right corner of the page.
There are two factors in drawing the background image:
Background positioning area.background-origin
The property determines the relative location. The default value ispadding-box
. Therefore, the default background image is drawn from the top left vertex of the padding box.
Background painting area.background-clip
The property determines the draw interval. The default value isborder-box
. Thereforebackground-repeat: repeat
When:
The image is repeated in this direction as often as needed to cover the background painting area.
Well, what do you mean? You can stamp it into this demo. Normally, the background image is filled as follows:
Of course, this filling rule can be passed throughbackground-clip
Changed.
background-clip
Set whether the background (background image or color) of the element is extended under the border.
Syntax:
{Background-clip: border-box; // The background is extended to the outer border (but below the border). background-clip: padding-box; // There is no background under the border, that is, the background is extended to the outer edge of the padding. Background-clip: content-box; // crops the background to the outer edge of the content-box .}
Next, you only need to fill the middle part in white. This can be done easily with pseudo elements. Therefore, one of the methods is as follows:
div{ background:#9c27b0; border:20px dashed #2196f3;}div::after{ content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:#fff;}
Method 2:
The above method is useddiv
By defaultborder
Start filling, and set the white background color filling for pseudo elementsdiv
In the middlepadding-box
The area is complete.
You can also use the pseudo-element background color fromborder-box
Start filling, usediv
In the middle of the background color Fillingpadding-box
Region.
div{ background:#fff; background-clip:padding-box; border:20px dashed #cccc99;}div::before{ content:""; position:absolute; top:-20px; left:-20px; bottom:-20px; right:-20px; background:#996699; z-index:-1;}
Here is the Demo stamp.
AboveMethod 2
Besidesbackground-clip
Changed the filling Area of the background and usedz-index
The trigger element generates a stacking context, which changes the stacked order of elements (stacking levle ).Pseudo element background color
StackedDiv background color
These two concepts will be mentioned.
Method ....
This question is mainly about the CSS box model.Box Model
And backgroundbackground
In fact, this question is about a dashed border, which can be filled with color internally. It is the same as the first question above. It can be completed by shadow and gradient. If you are interested, try other solutions on your own.
Here are some of the solutions I listed:
All the questions are summarized on my Github and sent to my blog for more communication.
At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.