CSS3 erzielt verschiedene Randeffekte

Durchscheinender Rand

Ergebnis:

Implementierungscode:

<div>
Können Sie den halbtransparenten Rand sehen?
</div>
div {
    /* Schlüsselcode */
    Rand: 10px durchgezogen rgba(255,255,255,.5);
    Hintergrund: weiß;
    Hintergrundclip: Polsterbox;
    /* Andere Stile */
    maximale Breite: 20em;
    Polsterung: 2em;
    Rand: 2em auto 0;
    Schriftart: 100 %/1,5 serifenlos;
}

Umsetzungspunkte:

Stellen Sie den Rahmen auf halbtransparent ein. Sie können den halbtransparenten Rahmen nicht sehen, da der Hintergrund standardmäßig bis zur unteren Ebene des Bereichs reicht, in dem sich der Rahmen befindet, d. h. der Hintergrund wird durch die Außenkante des Rahmens abgeschnitten.

Durch die Einstellung von background-clip: padding-box (der Anfangswert ist border-box) wird verhindert, dass der Hintergrund über den Randbereich hinausragt, d. h. die Außenkante der Polsterung wird zum Abschneiden des Hintergrunds verwendet.

Mehrere Grenzen

Ergebnis:

Implementierungscode:

<div></div>
/* Box-Shadow-Implementierung */
div {
    /* Schlüsselcode */
    Box-Schatten: 0 0 0 10px #655,
            0 0 0 15px tiefpink,
            0 2px 5px 15px rgba(0,0,0,.6);
    /* Andere Stile */
    Breite: 100px;
    Höhe: 60px;
    Rand: 25px;
    Hintergrund: gelbgrün;
}
/* Implementierung von Rahmen/Umriss */
div {
    /* Schlüsselcode */
    Rand: 10px durchgezogen #655;
    Umriss: 5px durchgehendes Dunkelrosa;
    
    /* Andere Stile */
    Breite: 100px;
    Höhe: 60px;
    Rand: 25px;
    Hintergrund: gelbgrün;
}

Umsetzungspunkte:

Die Box-Shadow-Implementierung verwendet den vierten Parameter von Box-Shadow (Expansionsradius). Ein positiver Dilatationsradius plus zwei Null-Offsets und Null-Unschärfewerte führen zu einer „Projektion“, die tatsächlich wie eine durchgezogene Grenze aussieht. Mithilfe von Box-Shadow, das eine durch Kommas getrennte Syntax unterstützt, können beliebig viele Schatten erstellt werden, sodass wir mehrere Randeffekte erzielen können.

Die Rahmen-/Umrissimplementierung besteht darin, mit „Rahmen“ eine Rahmenebene festzulegen und dann mit „Umriss“ eine Rahmenebene festzulegen. Mit dieser Lösung lässt sich zwar ein gepunkteter Rand erzielen, es sind jedoch nur zwei Randebenen möglich.

Umrandung Innenecken

Ergebnis:

Implementierungscode:

<div>Ich habe eine schöne abgerundete Ecke</div>
div {
    Umriss: .6em durchgezogen #655;
    box-shadow: 0 0 0 .4em #655; /* Schlüsselcode*/
    maximale Breite: 10em;
    Rahmenradius: .8em;
    Polsterung: 1em;
    Rand: 1em;
    Hintergrund: hellbraun;
    Schriftart: 100 %/1,5 serifenlos;
}

Umsetzungspunkte:

Der Umriss folgt nicht den abgerundeten Ecken des Elements (und erscheint somit als rechter Winkel), der Kastenschatten hingegen schon. Durch die Addition der beiden füllt der Kastenschatten (dessen Erweiterungswert etwa der Hälfte des Werts von „Border-Radius“ entspricht) einfach die Lücke zwischen dem Umriss und den abgerundeten Ecken des Containers und erzielt so den gewünschten Effekt.

Zusammenfassen

Oben habe ich Ihnen erklärt, wie Sie mit CSS3 verschiedene Rahmeneffekte erzielen können. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!