Wie erstelle ich halbtransparente Ränder in CSS?

So erstellen Sie halbtransparente Ränder in CSS

In CSS wirkt sich das Festlegen der Opazitätseigenschaft auf die Transparenz des gesamten Elements aus, einschließlich seiner Elemente Text. Für die Erstellung halbtransparenter Ränder ist kein einfacher Ansatz verfügbar. Mit dem RGBA-Farbformat können Sie diesen Effekt jedoch erzielen.

Zum Beispiel legt der folgende Code einen 50 % undurchsichtigen roten Rand fest:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Für Browser, die RGBA nicht unterstützen (IE8 und früher) ist eine Double-Border-Strategie erforderlich. Der erste Rahmen ist auf eine falsche Deckkraft eingestellt, während der zweite die tatsächlich gewünschte Deckkraft darstellt:

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Der erste Rahmen simuliert einen 50 % undurchsichtigen roten Rand über Weiß, was in den meisten Browsern den gewünschten Effekt erzeugt.

Um sicherzustellen, dass der Rand auch bei einer einfarbigen Hintergrundfarbe transparent bleibt, fügen Sie „background-clip: padding-box;“ hinzu. wie in den Beispielen oben gezeigt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich halbtransparente Ränder in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!