Question

我正在尝试使用CSS3线性渐变向页面添加功能区，但Chrome中的渲染看起来不如Firefox或IE替代品那么令人愉快。 Chrome中的颜色停止看起来非常像素化，但使用供应商前缀属性不起作用，因为它们不允许指定度数。

#extradiv1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 121px;
  height: 71px;
  background: url(../img/ribbon.png);
  background: linear-gradient(30deg,
      transparent 61px,
      rgb(255, 204, 51) 61px,
      rgb(255, 204, 51) 76px,
      rgb(22, 22, 22) 76px,
      rgb(22, 22, 22) 91px,
      transparent 91px
  );
}

<html>
  <body>
    <div id="extradiv1"></div>
  </body>
</html>

也可以在http://jsfiddle.net/xyFXx/2/

找到源代码

有没有办法在Chrome中解决这种不稳定渲染？

Answer 1

这是一个相当古老的问题，但我认为如果有人还在寻找答案，我会加入进来。

如果您不关心早于9的IE，则转换：旋转应该产生更好的渲染结果（透明的渐变渐变确实会变得不稳定或在渐变连接处获得间隙）。

您可以使用两个旋转的div，或使用单个div和关联的伪元素执行此操作。这是CSS：

.rotatedDiv {
    position: absolute;
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}

#extradiv1 {
    top: 20px;
    right: -30px;
    width: 200px;
    height: 20px;
    background: rgb(255,204,51);
}

#extradiv2 {
    position: absolute;
    top: 0;
    right: -20px;
    width: 170px;
    height: 20px;
    background: rgb(22,22,22);
}

小提琴：http://jsfiddle.net/brianhewitt1/m4KBC/

Chrome渲染线性渐变非常不稳定

1 个答案: