径向梯度CSS问题在IE

Question

I have used the following css for radial gradient.

background-image: -moz-radial-gradient(50% 0 , rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0)), -moz-radial-gradient(50% 100% , rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
   background-image:  -ms-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -ms-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
   background-image: -o-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -o-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
    background-image: -webkit-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -webkit-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));

It is working fine in firefox and google chrome. I need the same in IE. I have extracted the following css from google to work in IE

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

But i don't know how to change the percentages and colors to match the above css. Any help?

http://jsfiddle.net/tKjap/

Answer 1

Does IE support rgba colors? If it does, then just replace the hex colors in the copied code with the rgba colors.

Ex.)

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.35)', endColorstr='rgba(255, 255, 255, 0)',GradientType=0 ); /* IE6-9 */

Some reading:

• http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
• http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Answer 2

You can get the Gradient CSS as per your requirement and can make also Gradient CSS according to your color requirement.

http://www.colorzilla.com/gradient-editor/

Answer 3

这应该可以帮助您http://davidwalsh.name/css-gradients http://www.webdesignerwall.com/demo/gradient-box.html http://coding.smashingmagazine.com/2010/04/28/css3-互联网浏览器解决方案/