[CSS Secret]:css Tips (ii): multiple borders

My github Address: https://github.com/FannieGirl/ifannie/

The source is on top of it!

Like, give me a star.

Multiple borders

Problem: We usually want to adjust the border style in a more flexible way at the CSS code level

Scenario One: Box-shadow

So far, most of us have probably used (or abused) Box-shadow to generate projections, and what's less, it also accepts four parameters (expansion radius), which can increase or decrease the projected area by setting a positive or negative value.

The advantage of it is that it supports comma delimited syntax, and we can create any number of projections

Knowledge Background: Box-shadow property adds one or more shadows to the box.
Tip: Use the border-image-* property to construct beautiful, scalable buttons!

Syntax: Box-shadow:h-shadow v-shadow blur spread color inset;

Note: Box-shadow adds one or more shadows to the box. This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0.

H-shadow required. The position of the horizontal shadow. Negative values are allowed.
V-shadow required. The position of the vertical shadow. Negative values are allowed.
Blur is optional. Blur distance.
Spread is optional. The size of the shadow.
Color is optional. The color of the shadow. See CSS color values.
Inset is optional. Changes the outer shadow (outset) to an inner shadow.

Create a multi-border with the following code

：

Example Demo Address: https://jsfiddle.net/Fannie/06sjmL6n/5/

Scenario Two: Outline

In some cases, you may only need a two-layer border, you can set a regular border, plus outline (stroke) properties to produce the outer border, this method has the advantage that the border style is very flexible, unlike the Box-shadow scheme above Simulates a solid border (assuming we need to produce a dashed border effect, Box-shadow is not possible)

Knowledge Background: Outline (contour) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as a prominent element.
Note: Footprints do not occupy space or are not necessarily rectangles.

Syntax: Outline:outline-color outline-style outline-width inherit

OUTLINE-COLOR Specifies the color of the border.
Outline-style Specifies the style of the border.
OUTLINE-WIDTH Specifies the width of the border.
Inherit specifies that the settings for the outline property should be inherited from the parent element.

Create a multi-border with the following code

Effect Comparison Chart

Example Demo Address: https://jsfiddle.net/Fannie/06sjmL6n/6/

Also want to say a bit is change outline-offset value, can achieve very simple seam edge effect

Isn't it wonderful! (Just think of me as a retard!) What I want to say is to think more, to try more, everything is possible!
This outline scheme is only suitable for double-sided scenes, outline does not accept commas to separate multiple values, the border does not necessarily conform to the rounded corners created by the Border-radius property, so if the element is rounded, its stroke may be right-angled. In most cases, the strokes are rectangular.

After statement:
If you are already familiar with the basics, you can skip them automatically. The reason for this is that the leak is filled and the foundation is consolidated.
If there is a wrong place, you are welcome to spit the groove.
This article mainly refers to "CSS secret" a book and W3school;
Reference Link: http://www.w3school.com.cn/cssref/pr_background-clip.asp

[CSS Secret]:css Tips (ii): multiple borders