Почему этот радиальный градиент не завершает круг?

#css #css3 #html5 #градиент

Я пытаюсь использовать радиальный градиент для создания границы внутри элементов
круга, которые выполняют роль радио кнопок.  

Основной CSS показан ниже. Я не могу понять, почему красный градиент не охватывает
всю окружность.
Когда белый color-stop приближается к 100%,  появляются красные пробелы  сверху,
справа, слева и снизу.  

Почему это происходит, и как  это исправить,  используя радиальный градиент? 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 2px solid transparent;
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.radio1 { background: radial-gradient(circle closest-side, white 75%, red 100%); }
.radio2 { background: radial-gradient(circle closest-side, white 90%, red 100%); }
.radio3 { background: radial-gradient(circle closest-side, white 95%, red 100%); }
.radio4 { background: radial-gradient(circle closest-side, white 99%, red 100%); }

  

  

  

  

  





    

Ответы

Ответ 1

Как отмечено в комментариях, ваш процент будет пересчитан в пикселях относительно
вашей ширины / высоты. В вашем случае, 99% и 100% будут очень близки, и у вас возникнет
проблема с воспроизведением субпикселей.    

Вместо этого вы можете использовать calc(), где вы можете легко определить толщину
в виде значения в пикселях независимо от размера элемента.    

Вам также необходимо настроить background-origin и сделать его border-box, чтобы
вы рисовали градиент с учетом области границы, и у вас получился идеальный круг. 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 2px solid transparent;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  background-origin:border-box;
}

.radio1 { background-image: radial-gradient(circle closest-side, white calc(100%
- 1px), red 100%); }
.radio2 { background-image: radial-gradient(circle closest-side, white calc(100%
- 2px), red 100%); }
.radio3 { background-image: radial-gradient(circle closest-side, white calc(100%
- 3px), red 100%); }
.radio4 { background-image: radial-gradient(circle closest-side, white calc(100%
- 4px), red 100%); }

  

  

  

  

  






Вот еще один пример с большим значением border, чтобы лучше проиллюстрировать проблему
background-origin:



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); }

  






Фон рисуется на padding box, затем повторяется по всей области (border box).

Если вы отключите повтор, то у вас будет это: 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-repeat:no-repeat;
 }

  






Здесь мы повторим только на оси X:



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-repeat:repeat-x;
 }

  






И вот что происходит при использовании 100% для обоих цветов, что похоже на вашу
ситуацию, и вы лучше поймете, почему у вас есть окраска только на углах.



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
  background-image: radial-gradient(circle closest-side, white 100%, red 100%); 
 }
 
 .one {
   background-repeat:no-repeat;
 }
  .two {
   background-repeat:repeat;
 }
 .three {
   border-width:5px;
 }

  

  

  






И если мы изменим origin, это нормально: 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-origin:border-box;
 }