2

我正在开发一个按钮需要具有某种样式的项目，例如下面博客上发布的那个：

http://joeygallegos.tumblr.com/

该按钮仅在 Chrome、Safari、Android 和 iPhone/iPod touch 中可见。而且我想以跨浏览器格式提供它。我擅长手写 CSS，但我不太能理解跨浏览器渐变。如果有人可以帮助我更好地掌握它，将不胜感激。贝娄是我用来制作渐变的片段：

 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));

如果可能的话，我希望它像 Google 的标记一样，具有 -webkit、-moz、-ms、-o、线性等属性：

background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

如果您可以用与上面列出的颜色相同的颜色列出它，那将是一个巨大的帮助。谢谢！！

4

2 回答 2

2

渐变支持的第一个版本在 webkit 浏览器中以以下形式提供：

-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )

这是您使用的地方：

background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));

但是后来网络认为这太复杂了，并将其简化为这个（这是大多数浏览器现在使用的）：

-prefix-linear-gradient( direction|angle, color-stops... )

这是您使用的地方：

background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

IE 觉得它需要有所不同，所以它使用了过滤器，直到 IE10 才升级到这种新的更好的渐变表达方式。所以，你所拥有的一切都很好。如果你想要 IE7-IE9 支持，也可以使用这个：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");

还有很多工具可以帮助您制作渐变并为您生成跨浏览器代码（Google 是您的朋友）。Colorzilla有一个很好的。

于 2012-06-15T23:28:49.877 回答
0

除了定义不同的背景图像外，您还应该background-color为不支持任何渐变的浏览器定义一个纯文本。

您似乎缺少的唯一一个是用于旧 IE 的那个，filter用于生成渐变。

于 2012-06-15T23:25:54.297 回答