CSS3 радиальный градиент цвета края не совпадает с конечной остановкой цвета вокруг - PullRequest
3 голосов
/ 08 октября 2011

С учетом следующего 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.

1 Ответ

3 голосов
/ 08 октября 2011

Это потому, что в соответствии с спецификациями значением по умолчанию для аргумента size функции радиального градиента является cover, поэтому круг расположен так, что он пытается покрыть всю квадратную область пиксели с альфа> 0.

Итак, чтобы исправить это, установите этот аргумент на contain: http://jsfiddle.net/kizu/FZAJM/1/ - и он будет исправлен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...