A detailed CSS3 method for implementing multiple borders

CSS3 Box-shadow is used to make multi-border really compare to force, this is the detailed CSS3 to realize the multi-border approach to the focus, but before we first look at the better compatibility of the traditional way:

The 1:p method implements multiple borders in nested nesting.

：

HTML code

<p id= "outer" >    <p id= "inner" >p nesting for multi-border </p></p>

CSS Code

#outer {       width:100px;       height:100px;       Background-color:bisque;       border:10px solid Brown;       position:relative;   }   #inner {       width:84px;       height:84px;       BORDER:8PX solid blue;   }   /* #outer, #inner {    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;} */

Cons: You may not be able to modify the structure or modify the HTML structure at a high cost; When multiple p are rounded, the border does not fit perfectly. Rounded Multi-border:

Method 2: Use Outline+outline-offset to implement multiple borders.
If we only need to draw a two-layer border, using outline can also be done. Outline is the outer layer of border, the same as the border principle. By setting the style of the outline, you can set a border outside the border.
However, it is important to note that the borders set by the outline property do not change with the inner element boundary style. That is, if the element border has rounded corners, the outermost border drawn by outline is still rectangular. This is a drawback of outline drawing a border.
：

HTML code

<p id= "Outline" >outlie for multi-border </p>

CSS Code

#outline {       width:84px;       height:84px;       BORDER:8PX solid blue;       /*-webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;*/    outline:10px solid brown;       outline-offset:0px;       The distance between/*border and outline * *    margin:20px;       /* Because the outline does not affect the layout, use margin to give the border a space */}

Advantage: It is similar to the border, you can set a variety of linetypes, such as dashed, solid line.

Disadvantage: Outline does not affect the layout, you need to use margin to make the border space. Prevent it from being overwritten by other elements. If the container itself has rounded corners, the stroke does not fit perfectly to the fillet, as follows:

Method 3: Use the Box-shadow outer projection to implement multiple borders.
The Box-shadow property allows you to set the projection for the box model. But in fact it also has the function of setting the border.
Box-shadow can pass five parameters, the first two parameters represent the offset of the projection, the third parameter represents the degree of blur of the projection, the fourth parameter represents the projection's expansion, and the last parameter represents the color of the projection. However, we rarely use the fourth parameter, where the fourth parameter is used, the projection can be expanded, by setting a more appropriate value, you can simulate the effect of the border.
Similarly, the Box-shadow attribute can be passed into a list of multiple shadows, separated by ",". Therefore, as long as we define a list of shadows and increment the value of its expansion parameters, we can draw the effect of multiple borders.
：

HTML code

<p id= "Boxshadow" >boxshadow for multi-border (external projection) </p>

CSS Code

#boxShadow {       margin:40px;       /* Because Box-shadow does not affect the layout, use margin to make a position */    width:84px;       height:84px;       BORDER:8PX solid blue;       -webkit-border-radius:5px;       -moz-border-radius:5px;       border-radius:5px;       -webkit-box-shadow:0 0 0 10px Brown;       box-shadow:0 0 0 10px Brown;       /* Parameters are: Horizontal offset, vertical offset, blur distance, outward extended distance, and projected color */}

Pros: Multiple rounded borders are perfectly fit; You can also receive a list that sets multiple projections (that is, borders) at once. Its expansion effect is based on the element's own shape, if the element is a rectangle, it expands is a larger rectangle, if the element has rounded corners, it will also expand the fillet.

Disadvantage: CSS3 property, compatibility is not good, Box-shadow also does not affect the layout, if the relative position of the element and other elements of the relationship is very important, you need to use margin and so on for these extra "borders" to make up for the additional "border" to avoid being overwritten by other elements.

Note: Using inline projection (that is, Box-shadow to add a parameter to inset and not set as an outer shadow by default) seems like a better choice. Because the inline projection makes the projection appear inside the element, it is easier to set the padding inside the element to make more than one border.

Method 4: Use the Box-shadow inner projection to implement multiple borders. (Recommended use)

：

HTML code

<p id= "Moreboxshadow" >boxshadow for multi-border (internal projection) </p>

CSS Code

/* Use Box-shadow to set multiple borders at once and use inline projection */#moreboxShadow {       width:120px;       height:120px;       BORDER:8PX solid blue;       */* Note: The distance to expand outward to accumulate each time, the embedded projection is to add the parameter is inset, this parameter is optional, when not set as an external projection */    -webkit-box-shadow:inset 0 0 0 10px Brown, inset 0 0 0 20px Yell ow, inset 0 0 0 30px Green;       Box-shadow:inset 0 0 0 10px Brown, inset 0 0 0 20px Yellow, inset 0 0 0 30px Green;       padding:30px;       /* Set the padding, add a border to Box-shadow for the pain position, so that it does not affect the position between elements */}

Pros: Inline projection makes the projection appear inside the element, and setting the padding inside the element gives multiple borders a place to make it easier to handle.

Cons: CSS3 properties, poor compatibility