"Gradient" compatibility solution in css3, css3 gradient

"Gradient" compatibility solution in css3, css3 gradient

This is a simple question about the compatibility of our common gradient in various browsers.
Our well-known browsers include Chrome, Firefox, Opera, Safari, and ie series. The most basic background: # cccccc attribute indicates page rendering # cccccc color. Of course, this is true in any browser. However, as we increase our color requirements, we have introduced the gradient linear-gradient. Different browsers need to add different prefixes to their cognition. Through the above example, we can know that firefox:-moz-, chrome/safari/opera:-webkit-, ie:-ms-, and of course many versions of ie are not accepted, therefore, you can use a filter to process it.
Focus on the ie filter effect:
Filter: alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = # ffffff, endcolorstr = #000000, gradientType = 0 );
-Ms-filter: alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = # ffffff, endcolorstr = #000000, gradientType = 0 );

Style = 0: uniform shape; style = 1: Linear; style = 2: radial; style = 3: rectangle;
Startx/starty/finishx/finishy: coordinates of the start and end points;
Gradient = 1: horizontal gradient; gradient = 0: vertical gradient.

-Webkit-linear-gradient (top, # ffffff, #000000 );
Linear: Gradient Type
Top: Start Point
# Ffffff: start color
#000000: End color
Supported browsers: Webkit (-webkit-), Gecko (-moz-), presto (-o-), Trident (-ms -)
Direction:
In the above text, 'top' is the starting point and also contains 'to bottom'
<Angle>: 0deg indicates the direction from left to right, And 90deg indicates the direction from bottom to top. It can be expressed as a negative value, in the opposite direction as a positive value.
Top class: Give the starting direction. You only need to add two attributes in both directions, such as left top.

Ps: other browsers that do not meet these changes are still relatively small. In this case, you can define an appropriate over-color representation using the most basic background: # red.

-- Lankongclub