CSS implements gradient compatibility with mainstream browsers

In some cases, the gradient does not need to be cut, and some new users may not know it. This article describes how to use CSS to achieve linear gradient and be compatible with IE6.

Under what circumstances do I need CSS to implement a gradient?

It is unnecessary to replace the background image with CSS. For example, in the background of this form, it is a linear gradient from # ffffff to # eeeeee.

In some cases, the user may perform the following operations:

Or this is a variable-height layout. At this time, it is ideal to use CSS to implement this linear gradient.

The Code is as follows:

1. gradual_ff_f2 {2 filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = # ffffff, endcolorstr = # eeeeee, gradienttype = 0); 3 Background:-moz-linear-gradient (top, # ffffff, # eeeeee); 4 Background: -WebKit-gradient (linear, 0 0, 0 bottom, from (# ffffff), to (# eeeeee); 5 Background:-o-linear-gradient (top, # ffffff, # eeeeee); 6/* cannot be abbreviated, for example, # ffffff cannot be abbreviated as # fff, the reason is to be studied */7}

This method is only applicable to linear gradient, and does not support various gradient in PS (such as circular gradient). Of course, the premise is that it is compatible with various browsers, especially the IE series. You can use it when applicable.