How Can I Create Cross-Browser Compatible Linear Gradients in CSS3?

Cross-Browser Linear Gradients in CSS3

Creating linear gradients in CSS3 is a breeze, but cross-browser compatibility can be a challenge. Webkit browsers (Chrome and Safari) and Firefox use different syntax from Opera and Internet Explorer.

Webkit and Firefox Alternatives

The provided Webkit and Firefox syntax creates a diagonal linear gradient from top right to bottom left. Here's how to achieve this same gradient with Opera and Internet Explorer:

<br>background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); <br>background-image:      -o-linear-gradient(right, #0c93C0, #FFF);<br>

Cross-Browser Horizontal Gradients

To create a horizontal gradient, replace the "top" direction with either "left" or "right".

Internet Explorer

For Internet Explorer versions less than 10, you'll need to use the filter property:

<br>/<em>IE7-</em>/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);<br>/<em>IE8 </em>/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";<br>

-ms-Filter Syntax

The -ms-filter syntax is as follows:

<br>-ms-filter: progid:DXImageTransform.Microsoft.Gradient(<pre class="brush:php;toolbar:false"> startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

);

You can also use ARGB color formats, where FF represents opaque and 00 represents transparent.

The above is the detailed content of How Can I Create Cross-Browser Compatible Linear Gradients in CSS3?. For more information, please follow other related articles on the PHP Chinese website!