The method of implementing box model of CSS from stripe border

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.

backgroundIn 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-clipSets 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.