How Can I Implement CSS Gradients in IE9 and Beyond?

Gradients in Internet Explorer 9 and Beyond

As you're aware, implementing gradients in Internet Explorer has been a bit of a challenge in the past. However, with IE9, Microsoft finally introduced support for CSS gradients, opening up new possibilities for web designers.

To create a gradient in IE9, you can use the following syntax:

background-image: -ms-linear-gradient(top, #444444, #999999);

This will create a linear gradient that transitions from #444444 at the top to #999999 at the bottom.

Vendor Prefixes for Other Browsers

For other browsers, you'll need to use the following vendor prefixes:

• Mozilla Firefox: -moz-linear-gradient
• Apple Safari and Google Chrome: -webkit-gradient
• Opera: -o-linear-gradient

Example Code for Multiple Browsers

To support gradients in multiple browsers, you can use the following CSS code:

background-image:
    -ms-linear-gradient(top, #444444, #999999),
    -moz-linear-gradient(top, #444444, #999999),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #999999)),
    -webkit-linear-gradient(top, #444444, #999999),
    -o-linear-gradient(top, #444444, #999999);

Opera Vendor Prefix

As you have correctly mentioned, the vendor prefix for Opera is:

• -o-linear-gradient

Source: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

The above is the detailed content of How Can I Implement CSS Gradients in IE9 and Beyond?. For more information, please follow other related articles on the PHP Chinese website!