Comment corriger les saignements de bordure et les irrégularités des ombres dans IE9 avec des arrière-plans dégradés ?

Résolution des saignements de rayon de bordure et des irrégularités d'ombre dans IE9 avec des arrière-plans dégradés

Dans Internet Explorer 9, prise en charge du navigateur pour les rayons de bordure ( coins arrondis) et des dégradés d’arrière-plan sont disponibles. Cependant, en combinant ces fonctionnalités, les utilisateurs ont rencontré un problème où le dégradé saignait en dehors des coins arrondis. De plus, des irrégularités dans les ombres ont été observées.

Solution

Bien qu'IE9 puisse prendre en charge nativement à la fois le rayon de bordure et les dégradés d'arrière-plan, ils ne fonctionnent pas de manière transparente ensemble. Pour résoudre le problème de saignement, une solution consiste à envelopper l'élément avec le dégradé et les coins arrondis dans un autre div. Ce div externe doit avoir la même taille et les mêmes valeurs de coins arrondis que l'élément interne. En définissant le débordement sur caché, un effet de masque est créé, masquant efficacement le débordement de dégradé.

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>

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!