[分享]css3径向渐变ie9

CSS3径向渐变在网页设计中是一种非常流行的应用技术。然而，在Interent Explorer9（IE9）中，仍存在一些兼容性问题。下面将详细介绍如何在IE9上使用这种技术。/ CSS3径向渐变的代...

CSS3径向渐变在网页设计中是一种非常流行的应用技术。然而，在Interent Explorer9（IE9）中，仍存在一些兼容性问题。下面将详细介绍如何在IE9上使用这种技术。

/* CSS3径向渐变的代码 */
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #2989d8 100%);
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 100%);
background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#2989d8',GradientType=1); 

上述代码块是最常用的CSS3径向渐变代码。但是这段代码在IE9中并不能很好的兼容。IE9只支持透明度和渐变色的设置，并不支持径向渐变（radial-gradient）和椭圆形（ellipse）这种设置。因此，我们需要对代码进行修改以满足IE9上的兼容性要求。

修改后代码如下：

/* 修改后的CSS3径向渐变的代码 */
background-image: url('gradient.png'); /* 使用图片 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#2989d8',GradientType=0); /* 去掉GradientType和ellipse */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#2989d8')"; /* 添加-ms-filter属性 */ 

修改后的代码使用图片来实现CSS3径向渐变，然后在IE9上使用filter属性来应用渐变效果。注意，我们需要将GradientType去掉，并将ellipse改成0。另外，在IE9上使用渐变时，我们还需要添加-ms-filter属性以确保效果正确。

在这里需要注意的是，我们并不推荐使用图片来实现CSS3径向渐变。因为使用图片会增加页面的加载时间，而且如果图片的像素不足够高，会导致渐变过渡效果不流畅。因此，在大多数情况下，我们还是推荐使用CSS3径向渐变代码。

总之，在使用CSS3径向渐变技术时，我们需要注意IE9的兼容性问题，并对代码进行修改。如果我们能够正确地解决IE9的兼容性问题，在保证效果的同时，还能够提高网页的用户体验。