Multiple frames

With the rise of multiple backgrounds, multiple borders are used more and more frequently in normal development. We definitely want to flexibly implement this requirement through CSS code on the basis of an element. Let’s take a look at some examples

Box-shadow solution

Box-shadow also takes a fourth parameter, called “extension radius \color{red}{extension radius} extension radius”, which increases or decreases the area of the projection by setting positive and negative values. When we set both offsets and blur values of the projection to 0 and the expansion radius to a positive value, we get a solid border. Since the projection supports comma separation, we can create any number of projections

 box {
      margin: 40px;
      width: 100px;
      height: 50px;
      background-color: blueviolet;
      box-shadow: 0 0 0 10px #655,  0 0 0 15px red;
    }
    .box:hover{
      background-color: hotpink;
    }

<div class="box"></div>
Copy the code

In GIF images, we can see that box-shadow does satisfy our need for multiple borders, but the behavior of the shadow is completely different from that of the border. It does not affect the layout, nor is it affected by box-sizing. Color {red}{set inset to hover and click \color{red}{set inset to hover and click \color{red}

.box{ margin: 80px; width: 300px; height: 100px; background-color: chartreuse; /* Box-shadow: 0 0 0 10px deeppink inset, 0 0 0 25px #655 inset; } .box:hover{ background-color: hotpink; }Copy the code

After setting inset, we have solved the problem of hovering over the projection perfectly

The outline plan

In some cases we may only need two layers of borders. We can create the outer border by setting the general border and adding the outline stroke \color{red}{outline stroke}outline stroke property. This is more flexible, because the outline generated border style is flexible and can change the line type. Color, width, and it doesn’t take up space

.multiple-border { margin: 20px; width: 180px; height: 60px; background-color: chartreuse; border: 10px solid #665; */ outline: 5px dashed deeppink; } <div class="multiple-border"></div>Copy the code

We can also use the outline−offset\color{red}{outline-offset}outline−offset attribute to set the distance between the stroke and the element, which supports positive and negative values ~

Rounded edges inside the border

Sometimes when we are doing a container style, hope can realize a medial is rounded corners, and borders or stroke is still a right Angle, in fact, we use two elements can be very simple and very flexible to achieve this effect, however, if we want to realize the rounded effect of pure color We are can be used only to an element, Let’s take a look at some examples

Use the Outline + box-shadow attribute

.box{ margin: 20px; height: 50px; width: 100px; background-color: chartreuse; border-radius: .8em; outline: .6em solid #655; padding: 1em; /* box-shadow will follow the stroke */ box-shadow: 0 0 0.4em #655; } <div class="box"></div>Copy the code

Effect as above, in fact, we mainly through the outline properties not joint element inside \ color {red} {the outline properties not joint element inside} outline attribute will not joint elements inside, Color {red}{box-shadow} box-shadow is a feature that will follow the stroke to achieve this small requirement. We can set the stroke and shadow colors to two colors to better understand the idea visually

Color {red}{less than the width of the stroke} is less than the width of the stroke. The value must be greater than (√2−1) r\color{red}{(√ 2-1) r} (√2−1) r (r indicates border-radius)

conclusion

This chapter mainly introduces the use of CSS borders, highlighting some features of box-shadow and Outline. I hope you can learn from this blog ~ 😺