Tipps zum Implementieren mehrerer Rahmen in CSS

  <div Klasse="border-multiple">
        Implementierungslösung 1 für mehrere Rahmen: Box-Shadow
    </div>

    .border-mehrere {
        Rand: 50px automatisch;
        Polsterung: 20px;
        Breite: 600px; 
        Hintergrundfarbe: #fff; 
        Kastenschatten: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    } 

  <div Klasse="border-outline">
        Lösung 2 zur Implementierung mehrerer Grenzen: Überblick
    </div>
    .border-outline {
        Rand: 200px automatisch;
        Polsterung: 20px;
        Breite: 600px;
        Hintergrundfarbe: #ff0;
        Umriss: 3px gestrichelt #0f0;
        Umriss-Offset: -10px;
    } 

  <div Klasse="Innenrundung">
         Um dies zu erreichen, müssen Box-Shadow, Umrisse und „mehrere Ränder“ verwendet werden. Hinweis: Der Erweiterungsradius von Box-Shadow sollte das 0,5-fache des Radius der Ecke betragen.</div> 
    .innere Rundung {
        Hintergrundfarbe: #ccc;
        Rand: 50px automatisch;
        Polsterung: 20px;
        Breite: 600px; 
        Polsterung: 20px;
        Rahmenradius: 20px;
        Kastenschatten: 0 0 0 10px #f00;
        Umriss: 10px durchgezogen #f00;
    }

   <div Klasse="border-opacity">
         Implementierung eines halbtransparenten Rahmens</div>
    .border-opacity {
        Rand: 50px automatisch;
        Polsterung: 20px;
        Breite: 600px;
        Rand: 10px durchgezogener hsla (0, 0 %, 100 %, 0,5);
        Hintergrundfarbe: #fff;
        Hintergrundclip: Polsterbox;
    }

   <p class="border-image">Das Implementierungsprinzip von border-image ist die Neun-Raster-Erweiterungsmethode: Schneiden Sie das Bild in neun Teile und wenden Sie diese dann auf die entsprechenden Kanten und Ecken des Elementrahmens an. </p>
        <p class="border-image">Wir möchten nicht, dass ein bestimmter Teil des Bildes an der Ecke fixiert ist. Stattdessen soll sich der an der Ecke angezeigte Bildbereich ändern, wenn sich Breite, Höhe und Rahmenstärke des Elements ändern. </p>
        .Rahmenbild {
            Rand: 40px durchgehend transparent;
            Rahmenbild: 33,334 % URL („http://csssecrets.io/images/stone-art.jpg“);
            Polsterung: 1em;
            maximale Breite: 20em;
            Schriftart: 130 %/1,6 Baskerville, Palatino, Serifen;
        }
        .border-image:nth-child(2) {
            Rand oben: 1em;
            Rahmenbild-Wiederholung: rund;
        } 

 <p class="contituous-images">Ideen zur Umsetzung:
            1. Verwenden Sie CSS-Farbverläufe und Hintergrunderweiterungen. 2. Legen Sie einen rein weißen, einfarbigen Hintergrund über das Hintergrundbild. 3. Damit der untere Hintergrund durch den Randbereich hindurch sichtbar ist, müssen Sie für die beiden Hintergründe unterschiedliche Hintergrund-Clip-Werte angeben. 4. Legen Sie die Hintergrundfarbe unten für die mehreren Hintergründe fest. Sie müssen einen CSS-Farbverlauf von Weiß nach Weiß verwenden, um den Effekt eines rein weißen, einfarbigen Hintergrunds zu simulieren.</p>
        .kontinuierliche-Bilder {
            Polsterung: 1em;
            Rand: 1em durchgehend transparent;
            /* Hintergrund: linearer Farbverlauf (weiß, weiß),
                            URL (http://csssecrets.io/images/stone-art.jpg);
            Hintergrundgröße: Abdeckung;
            Hintergrund-Clip: Polsterbox, Rahmenbox;
            Hintergrundherkunft: Rahmenbox; */

            /* Hintergrund kann auch wie folgt abgekürzt werden*/
            Hintergrund: linearer Farbverlauf (weiß, weiß) Polsterbox,
            URL (http://csssecrets.io/images/stone-art.jpg) Rahmenbox 0 / Cover;

            Breite: 21em;
            Polsterung: 1em;
            Überlauf: versteckt;
            /*Rand kann gezogen werden*/
            Größe ändern: beides;
            Schriftart: 100 %/1,6 Baskerville, Palatino, Serifen;
        } 

<p class="envelope-border">Sie können auch Verlaufsmuster verwenden, um Umschlag-ähnliche Ränder zu erstellen</p>
.Umschlagrand {
    Polsterung: 1em;
    Rand: 0,5em durchgehend transparent;
    Hintergrund: linearer Farbverlauf (weiß, weiß) Polsterbox, sich wiederholender linearer Farbverlauf (-45 Grad, rot 0, rot 12,5 %, transparent 0, transparent 25 %, #58a 0, #58a 37,5 %, transparent 0, transparent 50 %) 0/3em 3em;
    maximale Breite: 20em;
    Schriftart: 100 %/1,6 Baskerville, Palatino, Serifen;}