CSS realisiert die Szenenanalyse von halbtransparenten Rändern und Mehrfachrändern

Szenario 1:

So erzielen Sie einen halbtransparenten Rand:

Aufgrund des Standardverhaltens von CSS-Stilen wird die Hintergrundfarbe im Bereich von Inhalt+Polsterung+Rand gerendert.

Der halbtransparente Rand wird durch die Hauptfarbe beeinflusst und der erzielte Effekt ist

Lösung:

Verwenden Sie die Eigenschaft „Hintergrundclip“, um den Zeichenbereich im Hintergrund anzugeben, sodass der Zeichenbereich auf Inhalt + Polsterung beschränkt ist.

Div {
Rand: 10px durchgezogen rgba (0,0,0,.5);
Hintergrund: hellblau;
Hintergrundclip: Polsterbox;
}

Ergänzung: background-clip ist nicht kompatibel mit IE6-8, Opera10

Szenario 2:

So implementieren Sie mehrere Rahmen:

Lösung 1: Verwenden Sie Box-Shadow, um mehrere Projektionen zu generieren

Der Code und die Wirkung sind wie folgt:

div {
Hintergrund: #c3e6f4;
Box-Schatten: 0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

Lösung 2: Kastenrand kombiniert mit Strichattributen (Umriss)

Funktionen: Es können nur doppelte Ränder erreicht werden, flexibler und gepunktete Linien und andere Effekte können verwendet werden

Der Code und die Wirkung sind wie folgt:

div {
Rand: 6px gestrichelt #c3f4ec;
Umriss: 10px durchgezogen #d9faf6;
Hintergrundclip: Polsterbox;
} 

Zusammenfassen

Oben ist die vom Herausgeber vorgestellte Szenarioanalyse zur Implementierung halbtransparenter Ränder und mehrerer Ränder mit CSS. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!