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

Posted 2023-03-06

【中文标题】如何使用chrome中的currentColor错误破解linear-gradient（）

【英文标题】：How to hack around linear-gradient() with currentColor bug in chrome

【发布时间】：2016-07-02 22:52:31

【问题描述】：

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

background: linear-gradient(currentColor, green);

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

我该如何解决这个问题？

【参考方案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;

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