Comment éviter le fond perdu du dégradé dans IE9 lors de l'utilisation de Border-Radius ?

Le rayon de bordure et le fond perdu du dégradé d'arrière-plan d'IE9 : une énigme

La prise en charge par IE9 du rayon de bordure à l'aide de la norme CSS3 est largement connue. Cependant, lorsque ces coins arrondis sont combinés avec un dégradé d'arrière-plan, un problème inattendu survient : le dégradé s'étend au-delà des bords incurvés.

Solution : utiliser une technique de masquage

Une solution de contournement consiste à utiliser un div supplémentaire pour agir comme un masque. Voici comment l'implémenter :

1. Ajouter un div de masquage : Enveloppez l'élément avec des coins arrondis et un dégradé dans un nouveau div.
2. Définissez Attributs Div : Donnez au div de masquage les mêmes valeurs de hauteur, de largeur et de rayon de bordure que l'élément interne.
3. Masquer le débordement : Définissez la propriété de débordement du div de masquage sur caché.

Cela crée un masque qui masque le fond perdu du dégradé, tout en permettant aux coins arrondis de rester intacts.

Code HTML et CSS :

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

En utilisant cette technique de masquage, vous pouvez surmonter le problème de fond perdu du dégradé et obtenir l'effet souhaité dans IE9.

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!