Comment utiliser CSS3 avec les filtres IE pour obtenir des effets de dégradé et d'ombre portée-tutoriel CSS-php.cn

Cet article présente principalement certaines méthodes d'utilisation de CSS3 avec les filtres IE pour obtenir des effets de dégradé et d'ombre. Bien qu'IE soit sur le point de se retirer de la scène de l'histoire, il peut également accumuler de l'expérience pour le développement associé du navigateur EDGE. peut s'y référer. Suivant

Implémentation du dégradé linéaire dans les filtres CSS3 et IE
Pour les perfectionnistes, utiliser une image pour un dégradé est une chose douloureuse, c'est aussi douloureux que d'avoir crottes de nez et ne pas les choisir = =. Donc, pour les dégradés ordinaires, si cela peut être résolu avec CSS, n'utilisez pas d'images.
CSS3 nous fournit la méthode linéaire-gradient, qui permet de définir directement des dégradés sur l'arrière-plan.

<!DOCTYPE>   
<style>   
p {   
  width:100px;height:100px;text-align:center;   
  font:16px/100px &#39;微软雅黑&#39;;color:#FFF;   
  /*以下是CSS3的线性渐变*/
  background:-webkit-linear-gradient(top,#FD0,#C30);   
  background:-moz-linear-gradient(top,#FD0,#C30);   
  background:-o-linear-gradient(top,#FD0,#C30);   
}   
</style>   
<p>次碳酸钴</p>

Copier après la connexion

Mais CSS3 est aussi un emmerdeur, il a besoin d'un préfixe de navigateur. En conséquence, j'ai dû écrire trois lignes pour cette chose. Cette méthode utilise généralement trois paramètres (vous pouvez également utiliser davantage de paramètres pour ajuster davantage de couleurs, ce qui sera abordé plus tard). Le premier paramètre est la direction du dégradé de haut en bas. Quant aux effets de gauche, de droite et de bas, il est facile de les faire sortir du haut, je n'entrerai pas dans les détails. CSS3 prend également en charge les dégradés à des angles spécifiques. Le premier paramètre peut être un degré, tel que 45deg, qui est un dégradé oblique. Cependant, cela est très difficile à implémenter sur IE, je n'entrerai donc pas dans les détails ici. Les deuxième et troisième paramètres sont la couleur du dégradé, qui ressort clairement du code. Les couleurs CSS3 peuvent être rendues transparentes à l'aide de rgba, comme 50 % de rouge transparent : rgba(255,0,0,0.5). Notez que la plage de valeurs du canal transparent est comprise entre 0 et 1.
Ensuite, parlons de la triche d'IE. IE doit utiliser des dégradés pour y parvenir. Je ne peux pas me plaindre du CSS3 à moitié cuit d'IE9. Il est préférable d'utiliser simplement des filtres.

<!DOCTYPE>   
<style>   
p {   
  width:100px;height:100px;text-align:center;   
  font:16px/100px &#39;微软雅黑&#39;;color:#FFF;   
  /*以下是IE的线性渐变*/
  filter:progid:DXImageTransform.Microsoft.Gradient(   
    StartColorStr=#FFDD00,EndColorStr=#CC3300
  );   
}   
</style>   
<p>次碳酸钴</p>

Copier après la connexion

Écoutez, IE peut facilement implémenter un dégradé aussi simple, bien que le code soit un peu plus long. Ce qu'il faut noter ici, c'est que la couleur dans le filtre ne peut pas être définie avec un simple #HHH, elle doit être écrite sous la forme d'un nombre hexadécimal complet à six chiffres. Si vous avez besoin de la même luminosité, ajoutez deux chiffres devant comme transparence, par exemple 50 % de rouge transparent : #80FF0000. En termes de direction du dégradé, IE n'a pas autant de directions que CSS3 qui peuvent être pivotées, mais les directions verticales et horizontales les plus élémentaires peuvent toujours être obtenues. La valeur par défaut est un dégradé de haut en bas. Vous pouvez ajouter GradientType=1 pour modifier le dégradé de gauche à droite.

p {   
  filter:progid:DXImageTransform.Microsoft.Gradient(   
    StartColorStr=#FFDD00,EndColorStr=#CC3300,GradientType=1   
  );   
}

Copier après la connexion

Puisque les filtres et CSS3 peuvent être utilisés pour atteindre la compatibilité, alors pour obtenir une compatibilité totale, il faut fusionner les méthodes ci-dessus. Levez-vous.

<!DOCTYPE>   
<style>   
p {   
  width:100px;height:100px;text-align:center;   
  font:16px/100px &#39;微软雅黑&#39;;color:#FFF;   
  /*全兼容线性渐变*/
  background:-webkit-linear-gradient(top,#FD0,#C30);   
  background:-moz-linear-gradient(top,#FD0,#C30);   
  background:-o-linear-gradient(top,#FD0,#C30);   
  filter:progid:DXImageTransform.Microsoft.Gradient(   
    StartColorStr=#FFDD00,EndColorStr=#CC3300
  );   
}   
</style>   
<p>次碳酸钴</p>

Copier après la connexion

Mise en œuvre de l'effet de projection d'éléments dans les filtres CSS3 et IE
Selon la convention, parlons d'abord de l'effet d'ombre de CSS3.

<!DOCTYPE>   
<style>   
p {   
  width:100px;height:100px;text-align:center;   
  font:14px/100px 微软雅黑;   
  border:1px solid #CCC;   
  /*CSS3投影效果*/
  box-shadow:0px 0px 10px #CCC;   
}   
</style>   
<p>次碳酸钴</p>

Copier après la connexion

Cette box-shadow ne nécessite pas d'en-têtes de compatibilité de navigateur. Je préfère ce CS3 ! Bien qu’IE9 prenne également en charge CSS3, il contient trop de bugs de triche. Je n’aime pas utiliser CSS3 d’IE9. En ce qui concerne cet effet d'ombre, IE9 n'aura aucun effet sur l'utilisation de l'ombre sur les éléments TABLE avec le jeu d'effondrement. En bref, IE a toutes sortes de bugs, mais il doit de toute façon être compatible avec IE6, alors ignorez simplement le CSS3 à moitié cuit d'IE9.
Il est assez difficile d'implémenter l'effet d'ombre sur IE. Bien qu'IE ait un filtre Shadow, il n'est pas différent d'un dégradé linéaire et ne peut pas obtenir l'effet de CSS3. Je ne vais pas le démontrer. Si vous voulez savoir quel est l’effet de cette chose, essayez-le vous-même. Parmi les nombreux filtres dans IE, seul le filtre Flou peut obtenir des effets similaires. Cependant, si le flou est utilisé directement sur un élément, le contenu sera flou, nous devons donc créer un nouvel élément pour le flouter, puis l'utiliser. pour brouiller le contenu. Ce nouvel élément est placé sous l'élément d'origine comme arrière-plan. Cela implique de nombreux calculs de coordonnées, si l'élément centré utilise un effet d'ombre portée, et implique également des calculs de déplacement de l'élément lorsque le navigateur le redimensionne. Par conséquent, il est préférable de l’écrire en JS pour IE. J'ai écrit les commentaires en détail. Vous devriez pouvoir le comprendre en regardant ce code.

<!DOCTYPE>   
<style>   
.shadow {   
  width:100px;height:100px;text-align:center;   
  font:14px/100px 微软雅黑;   
  border:1px solid #CCC;   
  background:#FFF;   
  position:relative;   
}   
.shadow-IE {   
  display:block;   
  position:absolute;background:#CCC;   
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=5);   
}   
</style>   
<p class="shadow">次碳酸钴</p>   
<script>   
//判断IE   
var isIE=/MSIE/i.test(navigator.userAgent);   
if(isIE){   
  //获取全部元素，其实可以用document.all的，不过习惯这样写   
  var all=document.getElementsByTagName("*"),s=[],i=0;   
  //把class为shadow的元素全放进s这个数组中   
  while(o=all[i++])if(o.className=="shadow")s.push(o);   
  //遍历s数组   
  for(i in s){   
    //创建一个元素，我习惯用u，其实用什么都可以   
    var o=s[i],u=document.createElement("u");   
    //把父元素设置成相对定位   
    o.parentNode.style.position="relative";   
    //对IE6、7要加个hasLayout，不然坐标计算会出错   
    o.parentNode.style.zoom=1;   
    //把创建的元素放到shadow元素的上方   
    //一定要是上方，因为下面的元素会挡住上面的元素   
    o.parentNode.insertBefore(u,o);   
    //给创建的元素应用个样式   
    u.className="shadow-IE";   
    //把宽度和高度设置到创建的元素上   
    u.style.width=o.offsetWidth+"px";   
    u.style.height=o.offsetHeight+"px";   
  };   
  //当窗口改变大小时触发   
  window.resize=function(){   
    //遍历s数组   
    for(i in s){   
      //我们在上面创建的元素移动到需要的位置   
      var o=s[i],p=o.previousSibling;   
      p.style.top=o.offsetTop-5+"px",   
      p.style.left=o.offsetLeft-5+"px";   
    };   
  };   
  //主动触发一次这个事件，让里面的代码在加载时执行一次   
  window.resize();   
};   
</script>

Copier après la connexion

N'ayez pas peur quand vous voyez un tas de JS. En fait, cela ne prend que quelques lignes si. vous supprimez les commentaires si vous l'écrivez avec jQuery Less. Ce code est simplement écrit avec désinvolture. Si vous voulez vraiment l'utiliser, ne le laissez pas dans la portée globale. Vous devriez laisser DOMReady l'appeler. Cela réduit la probabilité de conflits de variables. Il existe également des événements que j'écris directement dans le DOM. Bien sûr, si nécessaire, vous pouvez utiliser attachEvent pour effectuer une liaison afin d'éviter les conflits. Vous pouvez l'ignorer lorsque vous utilisez jQuery. En bref, le code n'est qu'une référence. Veuillez en profiter lorsque vous l'utilisez réellement ~

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. attention au contenu plus connexe. Site Web chinois PHP !

Recommandations associées :

À propos de la façon de mettre en œuvre une mise en page multi-lignes et multi-colonnes avec CSS

À propos de la mise en œuvre simple de la transition CSS et des effets 3D

Comment utiliser les pseudo-éléments CSS3 pour obtenir une bordure carrée qui brille progressivement

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!