Detailed explanation of 'gradient' compatibility solution in CSS3

This time we will briefly talk about the compatibility issues of our common gradients under various browsers, which is a relatively simple issue.
The browsers we are familiar with include Chrome, Firefox, Opera, Safari and IE series. The most basic background:#cccccc attribute indicates that the page will be rendered in #cccccc color. Of course, this is satisfactory in any browser. However, as our requirements for color increase, linear-gradient gradients are introduced, and different browsers need to add different prefixes to their understanding. From the above example, we can know that firefox:-moz-, chrome/safari/opera:-webkit-, ie:-ms-, of course, many versions of ie do not accept it, so we can use filters to deal with it.
Focus on the filter effect of ie:

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: unified shape; style=1: linear; style=2: radial; style=3: rectangular;
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:starting point
#ffffff:starting color
#000000 :End point color
Supported browsers: Webkit(-webkit-),Gecko(-moz-),presto(-o-),Trident(-ms-)
Direction:
'top' in the above is the starting point, and also contains 'to bottom'
: 0deg means the direction is from left to right, and 90deg means the direction is from bottom to top. Can be represented by negative values, in the opposite direction to positive values.
top class: Just give the starting direction. For two directions, just add two direction attributes, such as left top.

ps: There are still relatively few other browsers that do not meet these changes. For this situation, you can define a suitable transition color using the most basic background: #red or the like.

The above is the detailed content of Detailed explanation of 'gradient' compatibility solution in CSS3. For more information, please follow other related articles on the PHP Chinese website!