Question

给出以下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>。如何避免这种情况？

屏幕截图，调整对比度＆amp;饱和度使问题显而易见： Screenshot with adjusted contrast & saturation to make the problem obvious

在jsFiddle上实时查看。已验证在Chrome 14＆amp ;;中的OS X 10.7上发生16，Safari 5.1，Firefox 7＆amp; 9A2; Windows 14 in Chrome 14＆amp; 16，Firefox 7＆amp; 9.0a2。

Answer 1

这是因为，根据the specs，径向渐变函数的size参数的默认值为cover，因此圆圈的位置使其试图覆盖所有方形区域像素具有alpha＆gt; 0

所以，要解决此问题，请将此参数设置为contain：http://jsfiddle.net/kizu/FZAJM/1/ - 并且它将被修复。

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

1 个答案: