CSS3跨浏览器线性渐变

  • Z时代
  • 2024-01-10
  • 分类：问答

以下代码的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);

回答：

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

回答：

对于<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可以在以下位置找到更详细的文档

回答：

由于您是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部分是可选的，整个表达式不区分大小写。

以上是 CSS3跨浏览器线性渐变 的全部内容， 来源链接： utcz.com/qa/399522.html

回到顶部