css3 径向渐变中色标的百分比是什么意思

Question

这可能是一个简单的问题，但我没有找到明确的解释。

我在css3中知道，设置radial gradient的语法如下：

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

如果我这样设置：

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

我以为红圈会位于中心，红圈的半径是50%*containerWidth（或containerHeight）。即圆圈会刚好碰到外容器的边缘，但我得到的不是，请看演示：

DEMO ON JSFIDDLE

请问有谁能帮忙解释一下这里50%的确切含义是什么(#f00 50%)？非常感谢。

基于@的回答：

the 50% is refered to the diagonal from the center to the square corner

我这里也放了几个demo:

MORE DEMO ON JSFIDDLE

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

Answer 1

center 50% 50% 将渐变中心放在容器的中心，#f00 50% 用红色给渐变着色 最多 50% 的半径 其余部分50% 透明，正如您在 jsfiddle 中看到的那样。换句话说，百分比是指渐变对象的大小（即半径）（在径向渐变的情况下，它是半径，因为它从中心向外展开）。

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

Answer 2

色标中的 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>

css3 径向渐变中色标的百分比是什么意思

what's meaning of the percentage for color stop in css3 radial gradient

html

css

gradient

radial-gradients