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）结果没有显示这种风格时，如何解决？

Answer 1

问题是您使用供应商前缀-moz只有一个浏览器，读取-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;
}

您也可以使用this生成渐变

Answer 2

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

当语法标准化时，不要仅仅使用供应商前缀。

Answer 3

你应该使用：

.title {
    background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255,0,0,1.0)), to(rgba(255,0,0,0.0)));
}

这些链接可以帮助你：