Wie erstelle ich einen halbtransparenten Rahmen in CSS, ohne Bilder zu verwenden?

CSS-Randtransparenz ohne Bilder

Die Eigenschaft border-opacity existiert in CSS leider nicht. Es gibt jedoch Techniken, um halbtransparente Ränder mit anderen Methoden zu erstellen.

rgba-Farbformat

Um einen halbtransparenten Rahmen mit rgba zu erstellen, verwenden Sie die folgende Syntax :

div {
    border: 1px solid rgba(red, green, blue, opacity);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for modern browsers */
}

Zum Beispiel kann ein roter Rand mit 50 % Deckkraft mit rgba wie folgt erstellt werden:

div {
    border: 1px solid rgba(255, 0, 0, .5);
}

Dual Border Declaration (für ältere Browser)

Für Browser, die RGBA nicht unterstützen, wie z. B. IE8 und früher, besteht eine Problemumgehung darin, zwei Rahmendeklarationen zu verwenden:

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
}

Die erste Deklaration stellt die gefälschte Deckkraft bereit, während die zweite Verwendet die tatsächliche Deckkraft. Moderne Browser priorisieren die zweite Deklaration, während ältere Browser die erste verwenden.

Hinweis: Die Eigenschaft „background-clip: padding-box“ wurde hinzugefügt, um sicherzustellen, dass der Rahmen bei einem Hintergrund transparent bleibt Farbe wird aufgetragen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen halbtransparenten Rahmen in CSS, ohne Bilder zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!