代码之家 › 专栏 › 技术社区 › nielsdg

Chrome渲染线性渐变非常起伏

linear-gradients google-chrome css

nielsdg · 技术社区 · 12 年前

我正在尝试使用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中这种不稳定的渲染吗?

1 回复 | 直到 12 年前

bh-- 12 年前

这是一个相当古老的问题,但我想我会参与进来,以防有人仍在寻找答案。

如果您不担心IE早于9,请转换:旋转应该产生更好的渲染结果(透明的倾斜渐变确实会变得不稳定或在渐变连接处产生间隙)。

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