如何实现跨浏览器兼容的线性渐变？

在各种浏览器中实现线性渐变

跨浏览器兼容性

问题：获得线性的跨浏览器兼容性梯度指定为如下：

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

Opera 和 IE 替代方案：

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

垂直与水平渐变

将渐变修改为水平而不是水平垂直，使用以下值作为开始和结束点：

top left
top right

例如：

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

对于 10 之前的 Internet Explorer 版本，请使用以下代码：

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

说明

• 前缀用于实验性 CSS 属性：
  • -webkit- 用于 Webkit 浏览器（Chrome、 Safari)
  • -moz- 适用于 Firefox
  • -o- 适用于 Opera
  • -ms- 适用于 Internet Explorer
• 线性-不带前缀的渐变表示完全符合CSS规范。

参考

• [MDN: 线性渐变](https://developer.mozilla.org/en-US/docs/Web/CSS/linear -渐变）

以上是如何实现跨浏览器兼容的线性渐变？的详细内容。更多信息请关注PHP中文网其他相关文章！