给定以下 HTML:
<body><div class="container"></div></body>
和 CSS:
body {
background-color: #e9f9e9;
}
.container {
height: 200px;
width: 200px;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fcfffc), color-stop(100%, #e9f9e9));
background: -webkit-radial-gradient(#fcfffc, #e9f9e9);
background: -moz-radial-gradient(#fcfffc, #e9f9e9);
background: -o-radial-gradient(#fcfffc, #e9f9e9);
background: -ms-radial-gradient(#fcfffc, #e9f9e9);
background: radial-gradient(#fcfffc, #e9f9e9);
}
径向渐变的边缘与最终色标不匹配，因此与包含元素的背景色(与渐变的最终色标相同)不匹配，导致边缘颜色突然变化<div> .如何避免这种情况？
屏幕截图调整对比度和饱和度使问题明显:
观看直播 jsFiddle .已验证在 OS X 10.7 的 Chrome 14 和 16、Safari 5.1、Firefox 7 和 9a2 中出现； Chrome 14 和 16、Firefox 7 和 9.0a2 中的 Windows 7。
最佳答案
那是因为，根据the specs径向渐变函数的 size 参数的默认值是一个 cover，因此圆的位置使其尝试用具有 alpha > 的像素覆盖所有正方形区域0.
因此，要修复它，请将此参数设置为contain:http://jsfiddle.net/kizu/FZAJM/1/ — 它将被修复。
关于CSS3 径向渐变边缘颜色与周围的最终颜色停止不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7698497/