css3 线性渐变色标在 webkit 上的工作方式不同

Question

引用:www.get-offit.com

转到书籍封面即将结束且背景颜色发生变化的地方:

我们有:

html {
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(5, #FFFFFF), to(#EEEEEE));
background: -webkit-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);

如果您使用 firefox 打开网站，您会在白色和灰色之间看到一条清晰的分界线，没有任何渐变:

如果你用 chrome 打开网站，你会看到一个 5px 左右的灰色渐变，白色结束，灰色开始:

如何使颜色突然停止，而不像目前在 Firefox 上那样在 webkit 浏览器上显示实际渐变？

干杯G

Answer 1

尝试使用 Microsoft 网站上的这个 css 工具(是的，Microsoft):

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

它将有助于生成跨浏览器的 css 代码(不仅仅是 IE)，还可以在稍微改变渐变效果时派上用场。您可以添加更多渐变点，甚至可以尝试不同的颜色。

这是来自在线工具的代码示例:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EEEEEE));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);