为什么这个径向渐变不能使圆完整?

时间:2019-05-31 17:13:16

标签: css radial-gradients

我正在尝试使用径向渐变在作为单选按钮的圆形元素内创建边框。基本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 个答案:

答案 0 :(得分:3)

正如评论中所指出的,相对于您的宽度/高度,您的百分比将转换为像素。在您的情况下,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;
  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>


如果我们更改原点,那就没问题了

.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>