css - 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

许多 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>