Some interesting CSS questions (II) -- about the box model and css box from the implementation of the striped border

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 ModelAnd backgroundbackgroundAnd usebackground-clipChanges the filling mode of the background.

backgroundInBox ModelIs filled with the entire element of the box area, not frompaddingInternal (that is, it starts from border), but the solid line border (solid) partially BlocksbackgroundSo we can see that the background color is fromborderInternal.

We givedivAdd the following style:

div{    background:#9c27b0;    border:20px dashed #2196f3;}

The result is as follows:

Note that,background-colorIs from the upper left corner of the element's border to the lower right corner, andbackground-imageBut not frompaddingFrom the upper left corner of the edgeborderAt the bottom right corner of the page.

There are two factors in drawing the background image:

• Background positioning area.background-originThe 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-clipThe property determines the draw interval. The default value isborder-box. Thereforebackground-repeat: repeatWhen:

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-clipChanged.

background-clipSet 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 useddivBy defaultborderStart filling, and set the white background color filling for pseudo elementsdivIn the middlepadding-boxThe area is complete.

You can also use the pseudo-element background color fromborder-boxStart filling, usedivIn the middle of the background color Fillingpadding-boxRegion.

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 2Besidesbackground-clipChanged the filling Area of the background and usedz-indexThe trigger element generates a stacking context, which changes the stacked order of elements (stacking levle ).Pseudo element background colorStackedDiv background colorThese two concepts will be mentioned.

Method ....

This question is mainly about the CSS box model.Box ModelAnd backgroundbackgroundIn 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.