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

Question

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

关联fiddle:

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;
}

UPDATE：似乎在某些环境中出现了问题，例如 Chrome 在 Mac 上，Opera 在 Windows[=14= 上]

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 中看到 Windows 的失真。 此外，请确保您使用的是跨浏览器兼容性前缀。

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

CSS 3 gradients distortion for diagonal effect

macos

css

google-chrome

opera

Demo