Firefox的css线性渐变属性超过div的一部分而不是整个div？

Question

请参阅下面的图片。请注意Chrome中的内部渐变如何仅从顶部到底部渗透10px，而在Firefox中，渐变渗透到整个div中。

我想让Firefox渐变表现得像Chrome渐变。

Firefox有什么方法可以做到这一点吗？

以下是我的Chrome和Firefox的css代码。

background: -webkit-gradient(linear, 0 0, 0 10, from(#F5F6F7), to(white));
background: -moz-linear-gradient(top, #F5F6F7, white);

铬

火狐

Answer 1

我想你可能正在寻找这样的东西：

background: -moz-linear-gradient(top, #CCC 0%, #FFFFFF 10%);

你刚刚错过色挡参数。

现场演示：http://jsfiddle.net/kd8Vf/3/

我将颜色更改为#CCC，将背景更改为黑色，以便更好地查看。相应地改变颜色。

另见：https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Answer 2

像这样：gradient example

    background: #034769;
background: -moz-linear-gradient(top, #034769 0%, #63add0 10%, #ffffff 27%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#034769), color-stop(10%,#63add0), color-stop(27%,#ffffff));
background: -webkit-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: -o-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: -ms-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%);
background: linear-gradient(to bottom, #034769 0%,#63add0 10%,#ffffff 27%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#034769', endColorstr='#ffffff',GradientType=0 );