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

Answer 2

嘗試以這種方式使用它，它很簡單，希望這可以幫助你。 祝一切順利 ！

    <div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
         background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
         width: 200px; height: 100px; text-align: center;">
    </div>