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