如何使用chrome中的currentColor错误破解linear-gradient（）答案

【问题标题】：How to hack around linear-gradient() with currentColor bug in chrome如何使用chrome中的currentColor错误破解linear-gradient（）
【发布时间】：2016-07-02 22:52:31
【问题描述】：

在最新的 Chrome 版本 (49) 中存在一个错误，其中 CSS 喜欢...

background: linear-gradient(currentColor, green);

…当元素的color 发生变化时（例如：悬停）不会更新。

我该如何解决这个问题？

【问题讨论】：

标签： css google-chrome colors hover linear-gradients

【解决方案1】：

您可以使用border 来绘制一个颜色块，因为border-color auto 继承了color 属性，然后在其上绘制一个linear-gradient(to right, white, transparent)。然后边框块看起来像一个从白色到currentColor的线性渐变

查看演示：.g2 显示错误，.gradient 显示 hack。

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

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

【讨论】：

这是本示例的有效选项。不过，在某些情况下，您可能仍需要实际更改渐变的颜色。例如，如果您想要multi-colored gradients，或者如果您需要其中一种渐变颜色是透明的，同时具有不可预测的背景（如图像）。

【解决方案2】：

如果元素被重绘，渲染将更新 (See this question)。

例如

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

属性应该是……

仅限 webkit（以减少副作用）
可覆盖（仅当值更改时才会重绘元素）
很少重要（因为我们需要假设该属性尚未在元素上设置，以便以最小的后果覆盖它）
本身没有可见效果

.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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：