线性渐变在 Chrome 中不起作用

Question

经过大量搜索后，我陷入了线性渐变，它在 Firefox 中有效，但在 Chrome 中无效。

我在一个参考文献中描述的线性渐变之前添加了-webkit-，但仍然无法正常工作我认为问题出在渐变轴上

我的代码

<nav class="top_menu">
    <ul class="black_high">
        <li class="first active"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

.top_menu ul li.active a::after {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    transform:none;

    content: '';
    opacity: 1;
    background: #fff;
    background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}

在这里创建一个小提琴 -- http://jsfiddle.net/h2zu5xx2/4/

任何提示/建议都会很好。提前致谢。

Answer 1

首先请注意，-webkit-gradient 由 Apple 设计，并于 2008 年在基于 Webkit 的网络浏览器（例如 Safari 4）中实现，其语法与 W3C 标准完全不同：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

例如：

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

这就是为什么你不能让它在你的情况下工作。

一年后，Mozilla 引入了-moz-linear-gradient（自 Firefox 3.6 起），它的语法也与旧的 Webkit 版本不同，但随后在 -webkit-linear-gradient 下的 Webkit 中实现：

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

然而linear-gradient的W3C标准版本却不同，linear-gradient()表达式的正式语法是：

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

从您发布的代码中可以看出，另一个错误是 W3C 版本中缺少 to <side>。因此，在您的情况下，它应该是：

Example Here.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */

Answer 2

使用

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

与 Mozilla 的定义类似。

Answer 3

background: rgb(0,0,0);
background: linear-gradient(NaNdeg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);

这是答案，检查它！ （注* - NaN 与 'xx' 相同，表示您可以根据需要更改值。）

或者另一种方法是您可以使用渐变生成器创建渐变。 链接到我自制的梯度生成器：- https://dynamicmortal.github.io/GradientGenerator/

（只需复制生成的css）