Question

当我动态设置具有不同颜色值属性的元素类时，渐变currentColor值保持不变。实例：http://codepen.io/neilhem/pen/jbWRZZ

div {
  width: 200px;
  height:  200px;
  margin-bottom: 40px;
  color: red;
  background-image: radial-gradient(circle at 30% 50%, currentColor, transparent);
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}

Answer 1

这似乎是Chrome中的一个错误。

作为解决方法，您可以在yellow和green类中设置渐变：

.yellow {
    color: yellow;
    background-image: radial-gradient(circle at 30% 50%, currentColor, transparent);
}

.green {
    color: green;
    background-image: radial-gradient(circle at 30% 50%, currentColor, transparent);
}

（codepen）

然后按预期运行，在单击按钮时更改颜色。

请注意，无法只需在div.yellow, div.green上设置渐变：

div.yellow,
div.green {
    background-image: radial-gradient(circle at 30% 50%, currentColor, transparent);
}

（codepen）

这样做会导致div更新一次，然后只有在您选择元素后才会更新。

这可能会触发对元素的重绘，导致它更新。

渐变中的currentColor卡在Chrome中

1 个答案: