С учетом следующего 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; Windows 7 в Chrome 14 и 16, Firefox 7 и 9.0a2.