4

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

Основной 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%); }
<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>

1

2 ответа 2

5

Как отмечено в комментариях, ваш процент будет пересчитан в пикселях относительно вашей ширины / высоты. В вашем случае, 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>

Вот еще один пример с большим значением 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%); }
<div class="container">
  <div class="radio radio4"></div>
</div>

Фон рисуется на 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;
 }
<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;
  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;
 }
<div class="container">
  <div class="radio one"></div>
  <div class="radio two"></div>
  <div class="radio three"></div>
</div>

И если мы изменим 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;
 }
<div class="container">
  <div class="radio"></div>
</div>

1

В соседнем ответе поднимается и подробно объясняется довольно интересная, но... специфическая ситуация. Ответ же может быть короче, если затрагивать только суть проблемы и нацелиться на конечный результат.

Вам нужен круг? У круга два основных параметра: координаты центра и радиус. По умолчанию координаты равны at center (или at 50% 50%), поэтому можно опустить этот параметр. Вы же смещаете центр к границе элемента, используя closest-side.

Следующий параметр - радиус. Снова, обратимся к значению по умолчанию - форма градиента (если не указана) - ellipses. Но, так как width = height - получаем квадрат, а с помощью border-radius = 50% - круг. Так что можно этот параметр тоже не указывать.

Также у <div> отсутствует border, если он явно не указан - это избавляет нас от коррекции background-origin.

Про использование calc() уже написали - на крупных объектах от процентной записи будет заметен эффект, но на мелких элементах без использования calc() не обойтись.

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

.radio {
  display: inline-block;
  height: 20px; width: 20px;
  margin-right: 20px;
  border-radius: 50%;
  background-image: radial-gradient(white calc(100% - 6px), red calc(100% - 5px));
}
<div class="container">
  <div class="radio"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.