为所有其他支持浏览器转换-moz-linear-gradient

时间:2010-09-23 22:13:31

标签: css cross-browser css3 mozilla

这是我的规则:

#element {
  background: -moz-linear-gradient(center top, #FFF 8px, #F2F2F2 24px, #F2F2F2 100%) repeat scroll 0 0 #F2F2F2;
}

我想采用该规则并将其应用于支持线性渐变的所有浏览器。 此规则对Chrome,Safari和... Internet Explorer的语法是什么样的?

我正在考虑制作一个超级简单的网络应用程序,它将采用带有Mozilla规则的CSS文件,并启动其他浏览器的规则实现。

5 个答案:

答案 0 :(得分:3)

以下是所要求的渐变......

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);

答案 1 :(得分:3)

这个网站可以解决问题:http://www.colorzilla.com/gradient-editor/

从“CSS”区域选择“从css导入”并粘贴代码!!!

例如,您可以尝试使用“background: -moz-linear-gradient(center top, rgb(216,54,33), rgb(112,5,7));”之类的内容。

小心:代码必须以某种方式格式化...如果逗号后面有空格(“,”)例如,这不起作用......

答案 2 :(得分:2)

这不是太难......但是this website (css-tricks.com)可以比我更好地解释它。

答案 3 :(得分:1)

您正在寻找的内容已在此处提供:CSS3 Gradient Generator - 适用于Mozilla和基于Webkit的(Safari / Chrome)浏览器。

至于IE,MSDN可以帮助你。

答案 4 :(得分:0)

我经常使用

的内容
// Firefox
background: -moz-linear-gradient
// Chrome & Safari
background: -webkit-gradient
background: -webkit-linear-gradient
// Opera
background: -o-linear-gradient
// IE
background: -ms-linear-gradient

它可能就像你将要获得的交叉浏览器解决方案一样 - 但是CSS再次不是我的强项。