How Can I Create a Cross-Browser Linear Gradient?

Using Linear Gradient Across Browsers

To achieve a cross-browser linear gradient, it's essential to account for differences between browsers. Here are the alternatives for Opera and Internet Explorer (IE):

Opera

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

Internet Explorer

IE < 10

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);

/*IE8+*/
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

IE10

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

Modifying to Horizontal Gradient

To create a horizontal gradient, use the left or right direction instead of top or bottom.

Experimental CSS Prefixes

Note that experimental CSS properties use prefixes to indicate the browser they are intended for:

• -webkit- for Webkit browsers (Chrome, Safari)
• -moz- for Firefox
• -o- for Opera
• -ms- for Internet Explorer

Microsoft Gradient Filter Syntax

For IE, the -ms-filter syntax is as follows:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
    startColorStr='#0c93c0', /*Start color*/
    endColorStr='#FFFFFF',   /*End color*/
    GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

GradientType is optional and can be omitted.

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