solve the problem without regard to compatibility, the topic of unrestrained, think of what to say, if there is a problem you feel the unusual CSSProperty , hurry up and cram it.
2, similar to the following figure, only use a label, you can have how many ways to implement:
Let's say our single label is p
:
<p></p>
Define the following generic CSS:
p{ position:relative; width:180px; height:180px;}
This topic mainly examines the relationship between the box model Box Model
and the background background
, as well as the use background-clip
of changing the background of the Fill method.
background
In Box Model
, he is the box area full of elements, not starting from the padding
inside (that is, starting from the border), but the real line border (solid) part of the block background
, so we can use the dashed border (dashed) to see the background color from the c9/> started inside the house.
Let's p
add the following style:
p{ background: #9c27b0; border:20px dashed #2196f3;}
The results are as follows:
But one thing to note is that from the upper left corner of background-color
the element's bounding box to the lower right corner, but background-image
not the same, he is from the upper padding
left corner of the edge to border
the bottom right corner of the edge stop.
The drawing area is determined by two factors in the drawing of background image:
-
background positioning area. Background-origin
Padding-box . So the default background picture is drawn from the top left vertex of the padding box.
-
Background painting area. Background-clip
Border-box . So in the case of background-repeat:repeat
:
The image is repeated-direction as often as needed to cover the background-painting area.
Well, what do you mean, you can poke into this demo to see that the normal background image is populated as follows:
Of course, this fill rule can be background-clip
changed by changing it.
background-clip
Sets whether the background (background picture or color) of an element extends below the border.
Grammar:
{Background-clip:border-box; The background extends to the edge of the border (but below the border) Background-clip:padding-box; There is no background under the border, that is, the background extends to the outer edge of the inner margin. Background-clip:content-box; The background is cropped to the outer edge of the content area (Content-box). }
Go back to the subject, and then, just fill the middle part with white, which can be done easily with pseudo-elements, so one of the methods is as follows:
p{ background: #9c27b0; border:20px dashed #2196f3;} p::after{ content: ""; Position:absolute; top:0; left:0; bottom:0; right:0; Background: #fff;}
Law II:
The above method, we used the p
background color by default from the beginning of the border
fill, and the pseudo element to set the white background color fills p
the middle area of the padding-box
finished graphic.
You can also reverse, use the background color of the pseudo element to fill in from the border-box
beginning, and p
fill the middle area with the background color padding-box
.
p{ background: #fff; Background-clip:padding-box; border:20px dashed #cccc99;} p::before{ content: ""; Position:absolute; top:-20px; left:-20px; bottom:-20px; right:-20px; Background: #996699; Z-index:-1;}
In 法二
addition to the use background-clip
of changing the background of the fill area, but also used the z-index
trigger element generated the stacking context (stacking context), changed the stacking order of elements (stacking levle), so that the 伪元素背景色
stack to the Below p 背景色
, these two concepts are mentioned in the next question.
Method....
Box Model and the background background
, in fact, is a dashed border, the internal use of color fill can be similar to the first question above, using shadows, gradients can be done, Interested can try other solutions yourself.