Wie behebe ich Randradiusausblutungen und Schattenunregelmäßigkeiten in IE9 mit Verlaufshintergründen?

Behebung von Randradiusblutungen und Schattenunregelmäßigkeiten in IE9 mit Verlaufshintergründen

In Internet Explorer 9 unterstützt der Browser sowohl Randradius ( abgerundete Ecken) und Hintergrundverläufe sind verfügbar. Bei der Kombination dieser Funktionen ist jedoch ein Problem aufgetreten, bei dem der Farbverlauf außerhalb der abgerundeten Ecken verläuft. Darüber hinaus wurden Unregelmäßigkeiten in den Schatten beobachtet.

Lösung

Obwohl IE9 nativ sowohl Randradius- als auch Hintergrundverläufe unterstützt, arbeiten sie nicht nahtlos zusammen. Um das Blutungsproblem zu lösen, besteht eine Lösung darin, das Element mit dem Farbverlauf und den abgerundeten Ecken in ein anderes Div einzuschließen. Dieses äußere Div sollte die gleiche Größe und die gleichen Werte für abgerundete Ecken haben wie das innere Element. Indem Sie den Überlauf auf „Ausgeblendet“ setzen, wird ein Maskeneffekt erzeugt, der den Verlaufsüberlauf effektiv verbirgt.

HTML

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

CSS

<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>

Das obige ist der detaillierte Inhalt vonWie behebe ich Randradiusausblutungen und Schattenunregelmäßigkeiten in IE9 mit Verlaufshintergründen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!