如何在Chrome中通过currentColor错误绕过linear-gradient()的方法

Question

最新版Chrome（49）存在一个bug，与下面这样的CSS代码有关...

background: linear-gradient(currentColor, green);

当元素的 color 改变时（例如在 :hover 时），…没有更新。

我该如何解决这个问题？

- Matthias

Answer 1

渲染将会更新，如果元素被重新绘制(看这个问题)。

例如：

当元素的color改变时，您可以通过额外改变触发重绘的任意属性来强制重绘。

该属性应为：

1. 仅限于webkit（以减少副作用）
2. 可覆盖（只有在值更改时才会重新绘制元素）
3. 很少重要（因为我们需要假设该属性尚未在元素上设置，以使其具有最小的覆盖风险）
4. 本身没有可见效果

.box {
    width: 200px;
    height: 200px;
    
    background: linear-gradient(currentColor, green);
    
    color: #f00;
}

.box:hover {
    color: blue;
    
    /* arbitrary webkit-only property that forces a redraw */
    -webkit-margin-start: .1px;
}

<div class="box"></div>

- Matthias

Answer 2

你可以使用 border 来绘制一个颜色块，因为 border-color 属性会自动继承 color 属性，然后在其上绘制一个 linear-gradient(to right, white, transparent)。这样，边框块就会呈现出从白色到 currentColor 的线性渐变效果。

查看演示： .g2 显示了错误，而 .gradient 则显示了修复方法。

http://jsbin.com/luzute/1/edit?html,css,output

您可以调整white的透明度（例如rgba(255,255,255,0.5)），以调整渐变的亮度，或将白色更改为透明黑色（rgba(0,0,0,0.5)）以加深渐变。

- Xieranmaya

---

这是一个针对此示例的有效选项。不过有些情况下，您可能仍然需要实际更改渐变的颜色。例如，如果您想要多彩渐变，或者如果您需要渐变颜色之一是透明的，同时具有不可预测的背景（如图像）。 - Matthias