渐变在 Chrome 中不起作用，但在 Firefox 中起作用

Posted 2023-03-06

【中文标题】渐变在 Chrome 中不起作用，但在 Firefox 中起作用

【英文标题】：Gradient not working in Chrome, but works in Firefox

【发布时间】：2012-05-27 20:12:44

【问题描述】：

我正在尝试为 Chrome 使用 webkit 渐变标签，但它根本不起作用。我已经在 Firefox 中使用 background:-moz-linear-gradient(#000, #888); 进行了尝试，效果很好。

但是，background: -webkit-gradient(linear, from(#000), to(#888)); 不起作用。这是我的代码：

   echo "<tr style='background:-moz-linear-gradient(#000, #888); background: -webkit-gradient(linear, from(#000), to(#888));'><td width='65'><img src='images/avatar/defaultuser.jpg' height='65' width='65'>";

【参考方案1】：

使用colorzilla gradient generator 进行跨浏览器渐变

【参考方案2】：

改用这个：

background: -webkit-linear-gradient(#000, #888);

-webkit-gradient 适用于 Chrome v2 ...

【参考方案3】：

试试

-webkit-linear-gradient(#000, #888);

【参考方案4】：

-webkit-gradient 属性已弃用。使用new gradient syntax:

 background: -webkit-linear-gradient(#000, #888);

【参考方案5】：

webkit 需要更多东西：

你在 Firefox 中的哪个地方写的：

background:-moz-linear-gradient(top, #d39637, #000000); /* Firefox 3.6+ */

在你写的 chrome 中：

background:-webkit-gradient(linear, left top, left bottom, from(#d39637), to(#000000));

【参考方案6】：

Webkit 有自己的渐变语法

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(0,0,0,1)),
        color-stop(1, rgba(136,136,136,1))
    );

【参考方案7】：

chrome 和 Mozilla 的渐变色

背景图像：-webkit-渐变（线性，左下，左上，颜色停止（0.10，#72abe0），颜色停止（0.90，#eceaeb））； 背景图像：-moz-linear-gradient（中心底部，#72abe0 10%，#eceaeb 90%）；