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）。 也就是說，圓圈只會碰到外部容器的邊緣，但是我沒有，請看演示：

在JSFIDDLE上進行演示

那么有人可以幫忙解釋一下50％的確切含義嗎（ #f00 50% ）？ 非常感謝。

---

根據@的答案：

50％是指從中心到角的對角線

我還在這里放了幾個演示：

關於JSFIDDLE的更多演示

因為在默認選項下，百分比位於漸變停止半徑和對角線之間，所以當比率為2**0.5/2≈0.707 ，圓將接觸正方形的邊緣。

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> 

Answer 2

center 50% 50%將漸變中心放置在容器的中心， #f00 50%用紅色着色漸變，漸變半徑最大為半徑的50% ，其余50%透明，這正是您在jsfiddle中看到的。 換句話說，百分比是指漸變對象的大小（即半徑）（在徑向漸變的情況下，它是半徑，因為它從中心向外展開）。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient