为什么这个径向渐变不能使圆完整? [英] Why doesn't this radial-gradient complete the circle?

问题描述

我正在尝试使用径向渐变在作为单选按钮的圆形元素内创建边框.基本CSS如下所示.我无法弄清楚为什么红色渐变不会在圆圈的整个圆周上画圈.

I'm trying to use a radial gradient to create a border within circle elements that are radio buttons. The basic CSS is shown below. I cannot figure out why the red gradient does not circle the entire circumference of the circles.

当白色调接近100％时，在顶部，右侧，左侧和底部的红色中会出现间隙.

As the white color-stop approaches 100%, gaps appear in the red at the top, right, left, and bottom.

为什么会发生这种情况?在仍然使用径向渐变的情况下如何解决?

Why does this happen, and how would I fix it while still using a radial gradient?

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

Also on JSFiddle: https://jsfiddle.net/zvgcs80f/

推荐答案

您的百分比将相对于元素的宽度/高度转换为像素.在您的情况下，您的元素很小，因此99%和100%很可能会转换为相同的值或非常接近的值，并且您会遇到亚像素重贴问题.

Your percentage will be converted to pixel relatively to the width/height of your element. In your case, your element is small thus 99% and 100% will most likely be converted to the same value or very close values and you will have subpixel rendring issue.

相反，您可以依靠calc()，在其中可以轻松地将厚度定义为像素值，而与元素大小无关.

Instead you can rely on calc() where you can easily define the thickness as a pixel value independently of the element size.

还需要调整background-origin并将其设置为border-box，以便在考虑边界区域的情况下绘制渐变，并且您将拥有一个完美的圆.

You need to also adjust background-origin and make it border-box so that you draw the gradient considering the border area and you will have a perfect circle.

.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

Here is an example with big values of border to better illustrate the issue related to 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>

背景是在填充框上绘制的，然后在所有区域(边框)上重复出现.

The background is drawn on the padding box then it's getting repeated over all the area (border box).

如果您禁用重复，您将得到以下提示:

If you disable the repeat you will have this:

.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轴上重复

Here is if we repeat only on the X axis

.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％时发生的情况，这与您的情况类似，您将更好地理解为什么只在角落上有颜色.

And here is what is happening when using 100% for both colors which is similar to your situation and you will better understand why you have coloration only on the corners.

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

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

And if we change the origin it's fine:

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

这篇关于为什么这个径向渐变不能使圆完整?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！