How to deal with gradient compatibility in CSS3
This article mainly introduces how to deal with gradient compatibility in CSS3. It is very detailed and has a certain reference value. Friends who are interested must finish it!
Chrome, Firefox, Opera, Safari and ie series are common browsers that we often encounter. The most basic background:#cccccc attribute indicates that the page is rendered in # cccccc color, which is satisfied under any browser.
However, with the improvement of our color requirements, a gradient linear-gradient is introduced, and different browsers need to add different prefixes to its cognition. From the above example, we can know that firefox:-moz-, chrome/safari/opera:-webkit-, ie:-ms- and, of course, many versions of ie do not accept it, so we can deal with it in a filter way.
Do you know these 26 basic concepts and technologies of Web?
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: uniform shape; style=1: linear; style=2: radial; style=3: rectangular
Startx/starty/finishx/finishy: coordinates of start and end
Gradient=1: horizontal gradient; gradient=0: vertical gradient.
-webkit-linear-gradient (top,#ffffff,#000000)
Linear: gradient typ
Top: starting point
# ffffff: start color
# 000000: end Color
Support browsers: Webkit (- webkit-), Gecko (- moz-), presto (- o -), Trident (- ms-)
Direction:
In the above, 'top'' is the starting point, but also implies'to bottom'.
0deg indicates that the direction is from left to right, and 90deg indicates that the direction is from the bottom up. Can be expressed as a negative value, opposite to a positive value.
Top class: just give the starting direction. For both directions, just add two-direction attributes, such as left top.
Ps: there are relatively few other browsers that don't meet these changes. In this case, it is possible to define a suitable excessive color with the most basic representation such as background:#red.
The above is all the content of the article "how to deal with gradient compatibility in CSS3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
