CSS3跨浏览器线性渐变

小编典典

CSS3跨浏览器线性渐变

css

以下代码的Opera和IE替代品是什么？

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

注意，我已经测试了以下规则。所有浏览器都支持它们。但是它们是垂直渐变。谁能帮我将它们修改为水平的？

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);

阅读 386

2020-05-16

共1个答案

小编典典

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

所有实验CSS属性都获得一个前缀：

-webkit- 适用于Webkit浏览器（Chrome，Safari）
-moz- 用于FireFox
-o- 歌剧
-ms- 用于Internet Explorer
__完全不符合规范的实现 没有前缀 。

如果要改变角度，请使用top right代替right。如果需要水平渐变，请使用left或right。

也可以看看：

MDN： linear-gradient

IE浏览器

对于<IE10，您将必须使用：

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

filter适用于IE6，IE7（和IE8），而IE8建议使用-ms-filter（必须加引号）代替filter。Microsoft.Gradient可以在以下位置找到更详细的文档

`-ms-filter` 句法

由于您是IE的粉丝，因此我将说明-ms-filter语法：

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

除了使用RGBHEX颜色之外，还可以使用ARGB颜色格式。表示alpha，FF表示不透明，而00表示透明。该GradientType部分是可选的，整个表达式不区分大小写。

2020-05-16