css - 样式表 -moz-linear-gradient 在网络移动浏览器中不显示？

Question

我有一个示例代码：

<div class="title"><h3>Test Title<h3></div>

和CSS

.title {
    background: -moz-linear-gradient(center top , #6F6F6F 0%, #4E4E4E 100%) repeat scroll 0 0 transparent;
}

当我用PC浏览时结果还可以，但是使用手机（三星galaxy S3，iPhone 4）时结果不显示这种风格，如何解决？

score 4 · Accepted Answer

问题是您使用供应商前缀 -moz zo 只有一个正在阅读的浏览器 -moz 将与此一起使用

这是要使用的类型：

-moz-linear-gradient
-webkit-linear-gradient
-o-linear-gradient
-ms-linear-gradient
linear-gradient

你也可以尝试只使用大多数浏览器支持的线性渐变

.title {
    background: linear-gradient(center top , #6F6F6F 0%, #4E4E4E 100%) repeat scroll 0 0 transparent;
}

您也可以使用它来生成渐变

score 2 · Accepted Answer

-moz-是 Gecko 驱动的浏览器的供应商特定前缀。它不适用于不是由 Gecko 提供支持的浏览器。此后语法已经标准化，因此在较新的浏览器上，根本不再需要有供应商前缀：

background: linear-gradient(red, green);

不幸的是，并不是每个人都有更新的浏览器，因此您通常还必须包含供应商前缀：

background: -moz-linear-gradient(red, green);
background: -webkit-linear-gradient(red, green);
background: linear-gradient(red, green);

当语法标准化时，不要被欺骗只使用供应商前缀。

score 0 · Accepted Answer

你应该像这样使用：

。标题 {
    背景图像：-webkit-渐变（线性，左上，右下，从（rgba（255,0,0,1.0）），到（rgba（255,0,0,0.0）））；
}

这些链接可以帮助你：

3 回答 3