Wie verhindert man Gradientenbluten mit abgerundeten Ecken in Internet Explorer 9?

IE9-Randradius und Hintergrundverläufe: Behebung des Blutungsproblems

Internet Explorer 9 (IE9) unterstützt sowohl CSS3-Randradius als auch -Hintergrund Farbverläufe, aber die Kombination dieser Funktionen stellt eine Herausforderung dar. Der Farbverlauf läuft aus den abgerundeten Ecken heraus und erzeugt einen unerwünschten visuellen Effekt.

Das Problem verstehen

Um dieses Problem zu veranschaulichen, betrachten Sie die folgenden Bilder. Das erste Bild zeigt das erwartete Verhalten, bei dem kein Farbverlauf auftritt, die Ecken jedoch scharf sind. Das zweite Bild zeigt das Ausbluten, das auftritt, wenn Farbverlauf und abgerundete Ecken kombiniert werden.

[Bild-URL: https://i.sstatic.net/lCBe6.png]

[Bild-URL: https://i.sstatic.net/BbZ0D.png]

Eine Umgehung: Verwendung einer Maskierungstechnik

Eine Problemumgehung für dieses Problem ist die Verwendung einer Maskierungstechnik . Dazu gehört das Hinzufügen eines Wrapper-Div um das Element mit dem Farbverlauf und abgerundeten Ecken. Das maskierende Div sollte die gleichen Abmessungen und Werte für abgerundete Ecken haben und den Überlauf auf „Ausgeblendet“ setzen.

HTML-Code:

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

CSS-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 Problemumgehung verbirgt die Maske den Farbverlauf, der außerhalb der abgerundeten Ecken verläuft, und löst so das Blutungsproblem.

Das obige ist der detaillierte Inhalt vonWie verhindert man Gradientenbluten mit abgerundeten Ecken in Internet Explorer 9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!