Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Multiple border code

Box – shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

/ * x offset | y offset | shadow color * /
box-shadow: 60px -16px teal;

/ * x offset | y offset | | fuzzy shadow radius shadow color * /
box-shadow: 10px 5px 5px black;

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);

/ * insert (shadow) inward offset | y | x offset | shadow color * /
box-shadow: inset 5em 1em gold;

/* Any number of shadows separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keyword */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
Copy the code

Box-shadow is used to set the shadow. Less well known is that it also takes a fourth parameter (called the “radius of expansion”), where a positive value causes the shadow to expand; When the value is negative, the shadow shrinks. The default is 0, where the shadow is the same size as the element.

A positive extension radius plus two zero offsets and zero fuzziness values (i.e., the first three parameters are all zero) gives a “projection” that is essentially a solid border.

// css
div {
	width: 100px;
        height: 60px;
        margin: 25px;
        background: #e666ff;
        box-shadow: 0 0 0 10px #ffff4d;
}
// html
<div></div>
Copy the code

You could have done this directly with the border property, but box-shadow has the advantage of a comma-separated syntax that allows you to create any number of shadows. Therefore, you can add a border based on the example above.

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655.0 0 0 15px deeppink;
}
Copy the code

You can see that there is a two-layer border, but DEEppink has set the radius to 15px. Why does it look so narrow?

This is actually because box-shadow is layered on top of each other, with the first projection at the top, and so on. So the first projection with color #655 overwrites deeppink’s projection, causing Deeppink to display only 5px(15px-10px).

In this way, you can create any number of borders, and of course you can add a normal projection layer:

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655.0 0 0 15px deeppink,
		0 2px 5px 15px rgba(0.0.0.6);
}
Copy the code

The outline plan

outline

If only two layers of borders are required, then the Outline attribute can also be used at this time.

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	border: 10px solid #655;
	outline: 5px solid deeppink;
}
Copy the code

As you can see, the effect is the same as using box-shadow above, and box-shadow can only simulate solid border, while Outline can also achieve dashed border and so on. }}}}}}}}}}}}}}}}}}}}}}}}

div {
	outline: 5px dashed deeppink;
}
Copy the code