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

许多网络示例都会使用标准化的linear-gradient函数给出一个示例，如下所示：

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

但请注意，使用底部，顶部或类似关键字实际上并不是标准的一部分，您必须使用0deg，-90deg等学位值或应用{ {1}}前缀to，to bottom或to top：

to left top

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>

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

2 个答案: