Question

这是我的规则：

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

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

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

Answer 1

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

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

Answer 2

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

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

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

小心：代码必须以某种方式格式化...如果逗号后面有空格（“，”）例如，这不起作用......

Answer 3

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

Answer 4

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

至于IE，MSDN可以帮助你。

Answer 5

我经常使用

的内容

// 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再次不是我的强项。

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

5 个答案: