CSS3 线性渐变在 Firefox 上无法正常工作

Question

我使用 Adob​​e FireWorks CS6 创建了 CSS 线性渐变代码。我的 Grandient 应该是顶部浅蓝色，底部深蓝色，在 Chrome 和 safari 上都很好，但在 Firefox 上，左边是深蓝色，右边是浅蓝色。我对 html 和 CSS 很陌生，所以我不知道可能出了什么问题......我尝试将 -90deg 更改为 90deg、0deg 等......但没有任何反应......帮助!!!!!

color: #FFF;
/* Firefox v3.6+ */
background-image: -moz-linear-gradient(50% 0% -90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0.01, rgb(101,165,227)),color-stop(0.99, rgb(0,78,157)));
/* Chrome v10.0+ and by safari nightly build*/
background-image: -webkit-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* Opera v11.10+ */
background-image: -o-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* IE v10+ */
background-image: -ms-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
background-image: linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff65a5e3,endColorstr=#ff004e9d,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff65a5e3,endColorstr=#ff004e9d,GradientType=0);
line-height: 60px;
height: 60px;

Answer 1

许多网络示例都会给出使用标准化线性梯度函数的示例，如下所示:

linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);

但请注意，使用bottom、top或类似关键字实际上并不是标准的一部分，您必须使用度值，例如0deg、-90deg等，或者应用 to 前缀，例如 tobottom、totop 或 tolefttop:

linear-gradient(to bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
----------------^