Question

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

Answer 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%); }

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

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

1 个答案: