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

【问题标题】：Chrome renders linear-gradient very choppyChrome 渲染线性渐变非常不稳定
【发布时间】：2014-02-15 14:10:42
【问题描述】：

我正在尝试使用 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 中这种断断续续的渲染问题？

【问题讨论】：

标签： css google-chrome linear-gradients

【解决方案1】：

这是一个相当老的问题，但我想我会插话以防有人仍在寻找答案。

如果您不担心 IE 早于 9，则 transform:rotate 应该产生更好的渲染结果（透明倾斜渐变确实会变得不稳定或在渐变连接处出现间隙）。

您可以使用两个旋转的 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/

【讨论】：

感谢您仍然抽出时间回答我的问题！