Comment éviter le saignement dégradé avec des coins arrondis dans Internet Explorer 9 ?

Rayon de bordure et dégradés d'arrière-plan IE9 : résoudre le problème de saignement

Internet Explorer 9 (IE9) prend en charge à la fois le rayon de bordure et l'arrière-plan CSS3 dégradés, mais la combinaison de ces caractéristiques pose un défi. Le dégradé saigne des coins arrondis, créant un effet visuel indésirable.

Comprendre le problème

Pour illustrer ce problème, considérez les images suivantes. La première image montre le comportement attendu, où il n'y a pas de saignement de dégradé mais où les coins sont nets. La deuxième image montre le saignement qui se produit lorsque les coins dégradés et arrondis sont combinés.

[URL de l'image : https://i.sstatic.net/lCBe6.png]

[URL de l'image : https://i.sstatic.net/BbZ0D.png]

Un contournement : utilisation d'une technique de masquage

Une solution de contournement à ce problème consiste à utiliser une technique de masquage . Cela implique l'ajout d'un div wrapper autour de l'élément avec le dégradé et les coins arrondis. Le div de masquage doit avoir les mêmes dimensions, les mêmes valeurs de coins arrondis et le débordement défini sur caché.

Code HTML :

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

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>

En utilisant cette solution de contournement, le masque masque le dégradé qui saigne en dehors des coins arrondis, résolvant ainsi le problème de saignement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!