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%）？非常感谢。

基于@的回答：

  

50％是指从中心到正方形的对角线   角

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

MORE DEMO ON JSFIDDLE

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

Answer 1

色标中的50％取决于正在生成的图像的大小。

图像的大小取决于您在此属性的4个有效值之间的选择。

如果你没有设置它，那么选择最远角的选项（因此，在你的例子中，50％指的是从中心到方角的对角线

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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