对角线效果的CSS 3渐变失真

Question

我正在尝试使用css3创建一个以特定百分比运行对角线的渐变，但看起来锐利的外观正在变形。也许我在这里遗漏了一些东西，欢迎任何想法或建议。

相关的小提琴：

http://jsfiddle.net/abhinandan/ckaobdpv/

和使用的CSS3代码：

.header {
    position: relative;
    font-weight: 200;
    padding-top: 50px;
    color: #ffffff;
    text-shadow: 0 1px rgba(0,0,0,0.6);
    height: 9em;
    background:-webkit-linear-gradient(30deg, rgb(72, 208, 231) 30%,#f6f6f6 30%, #222 100%);
    opacity: 0.9;
}

更新：在某些环境中可能会出现问题，例如Mac上的Chrome，Windows上的Opera

Answer 1

你得到了rgb(72, 208, 231)和#f6f6f6之间的扭曲，因为你使用相同的百分比从第一种颜色淡化到第二种颜色。

所以，你要做的是增加第二种颜色的百分比：

.header {
   position: relative;
   font-weight: 200;
   padding-top: 50px;
   color: #ffffff;
   text-shadow: 0 1px rgba(0,0,0,0.6);
   height: 9em;
   background:-webkit-linear-gradient(30deg, rgb(72, 208, 231) 30%,#f6f6f6 50%, #222 100%);
   opacity: 0.9;
}

结果：

Demo

请注意，我在Chrome for Windows中看到了这种扭曲。 另外，请确保您使用前缀来实现跨浏览器兼容性。