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

Question

我用Adobe FireWorks CS6创建了CSS线性渐变代码.我的观众应该是顶部的浅蓝色和底部的深蓝色,在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

许多Web示例将使用标准化linear-gradient函数给出一个示例,如下所示:

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

但是请注意,采用底部,顶部或类似的关键字实际上不是标准的一部分,你必须使用一个度值,如0deg,-90deg等,或应用to 前缀一样to bottom,to top或者to left top:

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