如何创建跨浏览器线性渐变？

跨浏览器使用线性渐变

要实现跨浏览器线性渐变，必须考虑浏览器之间的差异。以下是 Opera 和 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);

修改为水平渐变

要创建水平渐变，请使用向左或向右方向，而不是顶部或底部。

实验性 CSS 前缀

请注意实验性 CSS 属性使用前缀来指示它们适用的浏览器：

• -webkit- 用于 Webkit 浏览器（Chrome、Safari）
• -moz- 用于 Firefox
• -o - 对于 Opera
• -ms- 对于 Internet Explorer

Microsoft渐变过滤语法

对于 IE，-ms-filter 语法如下：

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

GradientType 是可选的，可以省略。

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