How to write a gradient color background of gradient compatible with the current five browsers

This article focuses on "how to write gradient compatible with the current five major browsers gradient color background", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to write gradient compatible with the gradient color background of the current five browsers"!

Here are the current five browsers' support for gradient

The code is as follows:

# gradient {

Width: 200px

Height: 200px

/ * if the browser does not support gradients, use the image as the background * /

Background: url (gradient.jpg)

/ * Webkit: Safari 4-5, Chrome 1-9 * /

Background:-webkit-gradient (linear, 0%, 0% 100%, from (# ff6600), to (# 339900))

/ * Webkit: Safari 5.1, Chrome 10 + * /

Background:-webkit-linear-gradient (top, # ff6600, # 339900)

/ * Firefox 3.6 + * /

Background:-moz-linear-gradient (top, # ff6600, # 339900)

/ * Opera 11.10 + * /

Background:-o-linear-gradient (top, # ff6600, # 339900)

/ * IE 10 * /

Background:-ms-linear-gradient (top, # ff6600, # 339900)

/ * IE < 10 * /

/ * Note: this line must be written at the end * /

FILTER: progid:DXImageTransform.Microsoft.Gradient (startColorStr=#ff6600, endColorStr=#339900);}

The code is as follows:

At this point, I believe that "how to write gradient compatible with the current five major browsers gradient color background" have a deeper understanding, might as well to actually do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!