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

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

6 голосов
/ 31 мая 2019

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

Когда белый цветовой стоп приближается к 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%); }
<div class="container">
  <div class="radio"></div>
  <div class="radio radio1"></div>
  <div class="radio radio2"></div>
  <div class="radio radio3"></div>
  <div class="radio radio4"></div>
</div>

Также на JSFiddle: https://jsfiddle.net/zvgcs80f/

1 Ответ

6 голосов
/ 31 мая 2019

Ваш процент будет преобразован в пиксель относительно ширины / высоты вашего элемента.В вашем случае ваш элемент маленький, поэтому 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%); }
<div class="container">
  <div class="radio"></div>
  <div class="radio radio1"></div>
  <div class="radio radio2"></div>
  <div class="radio radio3"></div>
  <div class="radio radio4"></div>
</div>

Вот пример с большими значениями границы, чтобы лучше проиллюстрировать проблему, связанную с 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%); }
<div class="container">
  <div class="radio radio4"></div>
</div>

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

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

.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;
 }
<div class="container">
  <div class="radio"></div>
</div>

Вот если мы повторим только по оси 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;
 }
<div class="container">
  <div class="radio"></div>
</div>

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

.container {
  background: #ddd;
  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;
}
.four {
  width:20px;
  height:20px;
  border-width: 2px;
}
<div class="container">
  <div class="radio one"></div>
  <div class="radio two"></div>
  <div class="radio three"></div>
  <div class="radio four"></div>
</div>

И если мы изменим происхождение, все будет в порядке: 

.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;
 }
<div class="container">
  <div class="radio"></div>
</div>
...