Tips for implementing multiple borders in CSS

  <div class="border-multiple">
        Multiple border implementation solution 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);
    } 

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

  <div class="inner-rounding">
         Need to use box-shadow, outline, "multiple borders" to achieve Note: The extension radius of box-shadow should be 0.5 times the radius of the corner</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;
    }

   <div class="border-opacity">
         Implementation of semi-transparent 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;
    }

   <p class="border-image">The implementation principle of border-image is the nine-grid expansion method: cut the image into nine pieces, and then apply them to the corresponding edges and corners of the element border. </p>
        <p class="border-image">We don't want a specific part of the image to be fixed at the corner; instead, we want the image area that appears at the corner to change as the width, height, and border thickness of the element change. </p>
        .border-image {
            border: 40px solid transparent;
            border-image: 33.334% url("http://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;
        } 

 <p class="contituous-images">Implementation ideas:
            1. Use CSS gradients and background extensions 2. Overlay a pure white solid color background on the background image 3. In order to allow the lower background to show through the border area, you need to specify different background-clip values ​​for the two backgrounds 4. Set the background color at the bottom of the multiple backgrounds. You need to use a CSS gradient from white to white to simulate the effect of a pure white solid color background</p>
        .contituous-images {
            padding: 1em;
            border: 1em solid transparent;
            /* background: linear-gradient(white, white),
                            url(http://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(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;

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

<p class="envelope-border">You can also use gradient patterns to create envelope-style borders</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;}