How Can I Implement Cross-Browser Compatible Linear Gradients?

Implementing Linear Gradients in Various Browsers

Cross-Browser Compatibility

Problem: Obtain cross-browser compatibility for a linear gradient specified as follows:

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Opera and IE Alternatives:

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

Vertical vs Horizontal Gradients

To modify the gradients to be horizontal instead of vertical, use the following values for the start and end points:

top left
top right

For example:

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF);
background-image:      -o-linear-gradient(top, #0C93C0, #FFF);
background-image:         linear-gradient(top, #0C93C0, #FFF);

Internet Explorer < 10

For Internet Explorer versions prior to 10, use the following code:

/*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)";

Explanation

• Prefixes are used for experimental CSS properties:

  • -webkit- for Webkit browsers (Chrome, Safari)
  • -moz- for Firefox
  • -o- for Opera
  • -ms- for Internet Explorer
• linear-gradient without a prefix indicates full compliance with the CSS specification.

Reference

• [MDN: linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

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