最新版Chrome(49)存在一个bug,与下面这样的CSS代码有关...
background: linear-gradient(currentColor, green);
当元素的 color
改变时(例如在 :hover 时),…没有更新。
我该如何解决这个问题?
最新版Chrome(49)存在一个bug,与下面这样的CSS代码有关...
background: linear-gradient(currentColor, green);
当元素的 color
改变时(例如在 :hover 时),…没有更新。
我该如何解决这个问题?
color
改变时,您可以通过额外改变触发重绘的任意属性来强制重绘。.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>
你可以使用 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)
)以加深渐变。