CSS3径向渐变边缘颜色与最终颜色不匹配

Question

CSS3径向渐变边缘颜色与最终颜色不匹配

3

假设有以下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> 的边缘处导致突然的颜色变化。如何避免这种情况发生？

调整对比度和饱和度后的截图以使问题更加明显： Screenshot with adjusted contrast & saturation to make the problem obvious

在jsFiddle上查看实时效果。已验证在OS X 10.7中的Chrome 14和16、Safari 5.1、Firefox 7和9a2；Windows 7中的Chrome 14和16、Firefox 7和9.0a2上出现此问题。

- Andrew Marshall

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kizu · Accepted Answer

这是因为，根据规范，径向渐变函数的size参数默认值是cover，所以圆形定位在试图用alpha > 0的像素覆盖整个正方形区域。

因此，为了解决此问题，请将此参数设置为contain：http://jsfiddle.net/kizu/FZAJM/1/ — 即可解决问题。