Implementation tips of multiple borders in CSS

Time:2021-9-7

1、 Multiple borders [1]

Background knowledge: box shadow, outline
In view of the diversity of usage scenarios, there are more and more multi border designs. In the past, you can deal with it with the border image attribute, but this is not very flexible at the CSS code level. Now we use the box shadow and outline attributes to implement multiple borders respectively.

1. Box shadow scheme

Idea: use the size of the fourth parameter (expansion radius) of box shadow to multiple projection
Code example:

<div class="border-multiple">
        Multi border implementation scheme 1: box shadow
    </div>

    .border-multiple {
        margin: 50px auto;
        padding: 20px;
        width: 600px; 
        background-color: #fff; 
        box-shadow: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    }

在这里插入图片描述

Multi border — box shadow

Summary:

1. Shadows do not affect the layout and are not affected by box sizing
2. Comma separated syntax is supported, and any number of projections can be created
3. Disadvantages: only solid line borders can be realized, and other styles of borders cannot be realized

2. Outline scheme

Code example:

<div class="border-outline">
        Multi border implementation scheme 2: Outline
    </div>
    .border-outline {
        margin: 200px auto;
        padding: 20px;
        width: 600px;
        background-color: #ff0;
        outline: 3px dashed #0f0;
        outline-offset: -10px;
    }

在这里插入图片描述

Multiple borders – outline

Summary:

1. The premise is to realize two-layer border
2. The attribute value of outline offset may be required
3. The stroke of the outline is a rectangle by default. When there is a fillet, it will be considered a bug and cannot fit the fillet
4. Comma syntax is not supported

2、 Border fillet [2]

Background knowledge: box shadow, outline
In order to solve the bug in summary 3 of the above example, you can use the box shadow expansion radius to fill the gap between the fillet and the outline.
Code example:

<div class="inner-rounding">
         It needs box shadow, outline and multiple borders to implement 
         Note: the expansion radius of box shadow should be 0.5 times of the fillet radius
    </div> 
    .inner-rounding {
        background-color: #ccc;
        margin: 50px auto;
        padding: 20px;
        width: 600px; 
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 0 0 10px #f00;
        outline: 10px solid #f00;
    }

Note: the expansion radius of box shadow should be 0.5 times of the fillet radius; Strictly speaking, it should be (√ 2 – 1) times, and 0.5 times here is for better calculation

在这里插入图片描述

Border fillet

3、 Translucent border [3]

Background knowledge: RGBA or HSLA color attribute, background clip
Idea: make the border appear in the padding box of the cropped background
Code example:

<div class="border-opacity">
         Implementation of translucent border
    </div>
    .border-opacity {
        margin: 50px auto;
        padding: 20px;
        width: 600px;
        border: 10px solid hsla(0, 0%, 100%, 0.5);
        background-color: #fff;
        background-clip: padding-box;
    }

Summary:

The implementation of translucent border needs the help of the background clip attribute of CSS3
Background clip has three properties:
1. Border box: the background is clipped to the border box (the border is not visible)
2. Padding box: the background is clipped to the inner margin box (the border can be seen)
3. Content box: the background is clipped to the content box (the border is close to the content)

在这里插入图片描述

Translucent border effect

4、 Continuous image border [4]

Background knowledge: CSS gradient, basic border iamge, background clip
Let’s take a look at how border image implements image borders:
The implementation principle of border image is Jiugong grid expansion method: cut the image into nine pieces, and then apply them to the corresponding edges and corners of the element frame.
Code example:

< p class = "border image" > the implementation principle of border image is the Jiugong grid expansion method: cut the image into nine pieces, and then apply them to the corresponding edges and corners of the element frame</ p>
        < p class = "border image" > we don't want a specific part of the picture to be fixed at the corner; Instead, you want the image area at the corner to change with the width, height, amount and border thickness of the element</ p>
        .border-image {
            border: 40px solid transparent;
            border-image: 33.334% url("https://csssecrets.io/images/stone-art.jpg");
            padding: 1em;
            max-width: 20em;
            font: 130%/1.6 Baskerville, Palatino, serif;
        }
        .border-image:nth-child(2) {
            margin-top: 1em;
            border-image-repeat: round;
        }

在这里插入图片描述

Border image rendering

Disadvantages: we don’t want to fix a specific part of the picture at the corner; Instead, you want the image area at the corner to change with the width, height, amount and border thickness of the element.
How to solve it?
Implementation idea:
1. Using CSS gradient and background extension
2. On the background image, overlay a solid white background
3. In order to display the background of the lower layer through the border area, you need to specify different background clip values for the two layers of background
4. Setting the background color at the bottom of multiple backgrounds requires a CSS gradient from white to white to simulate the effect of a pure white solid background

Code example:

< p class = "contituous images" > implementation idea:
            1. Using CSS gradient and background extension
            2. On the background image, overlay a solid white background
            3. In order to display the background of the lower layer through the border area, you need to specify different background clip values for the two layers of background
            4. Setting the background color at the bottom of multiple backgrounds requires a CSS gradient from white to white to simulate the effect of a pure white solid background
        </p>
        .contituous-images {
            padding: 1em;
            border: 1em solid transparent;
            /* background: linear-gradient(white, white),
                            url(https://csssecrets.io/images/stone-art.jpg);
            background-size: cover;
            background-clip: padding-box, border-box;
            background-origin: border-box; */

            /*Background can also be abbreviated as follows*/
            background: linear-gradient(white, white) padding-box,
            url(https://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;

            width: 21em;
            padding: 1em;
            overflow: hidden;
            /*The border can be dragged*/
            resize: both;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

在这里插入图片描述
Continuous image border

You can also implement envelope style borders with gradient patterns
Code example

You can also implement envelope style borders with gradient patterns

< p class = "envelope border" > envelope style border can also be realized through gradient pattern</p>
.envelope-border {
    padding: 1em;
    border: 0.5em solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;}

在这里插入图片描述

Envelope border rendering

This is the end of this article about the implementation tips of multiple borders in CSS. For more information about CSS borders, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]