Comment réparer le rayon de bordure et le saignement du dégradé d'arrière-plan dans IE9 ?

Correction du rayon de bordure et du dégradé d'arrière-plan dans IE9

Dans Internet Explorer 9, les coins arrondis et les dégradés d'arrière-plan peuvent être implémentés séparément à l'aide de CSS3 rayon-frontière. Cependant, la combinaison de ces éléments entraîne souvent un saignement de dégradé au-delà des coins arrondis.

Pour résoudre ce problème, une solution de contournement consiste à envelopper l'élément de dégradé dans un div conteneur qui correspond à ses dimensions et à ses valeurs de coins arrondis. Cela crée essentiellement un masque qui confine le dégradé dans la zone souhaitée.

HTML :

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

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 */
}

Cette approche masque efficacement le fond perdu du dégradé en le coupant aux limites des coins arrondis. Cependant, il est important de noter que cela peut avoir un impact sur l'interactivité avec le contenu dégradé sous-jacent.

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!