CSS3径向渐变中颜色停止百分比的含义是什么？

Question

这可能是一个简单的问题，但我没有找到一个清晰的解释。我知道在CSS3中，设置径向渐变的语法如下：

radial-gradient(shape size at position, start-color, ..., last-color);

如果我设置类似这样的内容：

radial-gradient(circle at 50% 50%, #f00 50%, transparent 50%);

我原以为红色圆圈会位于中心，红色圆圈的半径将是容器宽度的50%*containerWidth(或容器高度)。也就是说，圆圈将刚好接触外部容器的边缘，但实际得到的结果并非如此，请参见演示：

JSFIDDLE上的DEMO

那么有谁能够帮忙解释一下这里的50%具体意义吗（#f00 50%）？非常感谢。

---

基于@的答案：

这里的50%是指从正方形中心到对角线的长度。

我在这里还放了几个演示：

更多JSFIDDLE DEMO

因为在默认选项下，百分比是在渐变停止半径和对角线之间的，所以当比率为2**0.5/2≈0.707时，圆圈将接触正方形的边缘。

- Vigor

Answer 1

颜色停止处的50%取决于正在生成的图像的大小。

而图像的大小取决于您在此属性的4个可能值之间进行选择。

如果您未设置它，则选择最远角选项（因此，在您的示例中，50％是指从中心到正方形角落的对角线）。

div{
  width:100px;
  height:160px;
  border:solid 1px blue;
  display: inline-block;
}

.gradient1{
  background-image: radial-gradient(circle closest-side at 50% 40%, #f00 50%, transparent 50%);
}
.gradient2{
  background-image: radial-gradient(circle closest-corner at 50% 40%, #f00 50%, transparent 50%);
}
.gradient3{
  background-image: radial-gradient(circle farthest-side at 50% 40%, #f00 50%, transparent 50%);
}
.gradient4{
  background-image: radial-gradient(circle farthest-corner at 50% 40%, #f00 50%, transparent 50%);
}

<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>

- vals

---

嗨@vals，谢谢。你的答案“50%是指从中心到正方形角落的对角线”正是我想知道的。 - Vigor

Answer 2

center 50% 50% 将渐变中心放置于容器中心，#f00 50% 使用红色对渐变进行着色，半径的50%之内是有颜色的，剩下的50%是透明的，这正是在jsfiddle中看到的效果。换句话说，百分比指的是渐变对象的大小（即半径），在径向渐变的情况下，它是从中心向外展开的半径。

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

- Nikos M.