Wie verhindert man Hintergrundverlaufsausblutungen in IE9 bei Verwendung von Border-Radius?

Border-Radius und Background Gradient Bleed von IE9: ein Rätsel

Die Unterstützung von IE9 für Border-Radius unter Verwendung des CSS3-Standards ist weithin bekannt. Wenn diese abgerundeten Ecken jedoch mit einem Hintergrundverlauf kombiniert werden, tritt ein unerwartetes Problem auf: Der Verlauf geht über die gekrümmten Kanten hinaus.

Lösung: Verwendung einer Maskierungstechnik

Eine Problemumgehung besteht darin, ein zusätzliches Div als Maske zu verwenden. So implementieren Sie es:

1. Maskierungs-Div hinzufügen:Das Element mit beiden abgerundeten Ecken und dem Farbverlauf in ein neues Div einschließen.
2. Set Div-Attribute: Geben Sie dem Maskierungs-Div die gleichen Werte für Höhe, Breite und Randradius wie dem inneren Element.
3. Überlauf ausblenden: Setzen Sie die Überlaufeigenschaft des Maskierungs-Div auf ausgeblendet.

Dadurch wird eine Maske erstellt, die den Farbverlauf verdeckt, während die abgerundeten Ecken intakt bleiben.

HTML- und CSS-Code:

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></code>

<code class="css">.mask {
    overflow: hidden;
}

.roundedCorners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}</code>

Durch die Verwendung dieser Maskierungstechnik können Sie das Problem des Farbverlaufs überwinden und den gewünschten Effekt in IE9 erzielen.

Das obige ist der detaillierte Inhalt vonWie verhindert man Hintergrundverlaufsausblutungen in IE9 bei Verwendung von Border-Radius?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!