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

Question

请看下面的图片。请注意，Chrome 中的内部渐变如何从上到下仅渗透 10 像素，而在 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

像这样的东西：渐变示例

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