如何以百分比定义CSS径向渐变（radial-gradient）的尺寸？

直接在circle后写百分比（比如circle 30%）不符合预期或看似无效，原因在于：

• circle的百分比半径是相对于容器宽高中的较小值计算的，若你期望它基于容器的宽度/高度，结果会偏离预期；
• 部分旧浏览器对circle的百分比语法支持有限。

以下是几种可行的解决方案：

方案1：用ellipse模拟正圆，指定双百分比 #

ellipse允许分别定义x轴和y轴的半径百分比，分别对应容器的宽度和高度。设置相同的百分比即可得到适配容器的正圆渐变，完全符合你想要的“随容器尺寸变化”的需求。

示例代码：

radial-gradient(ellipse 30% 30% at 5% 20%, red, blue 100%)

这里的30% 30%分别表示x轴半径为容器宽度的30%，y轴半径为容器高度的30%，最终呈现正圆效果，且会随容器尺寸自动缩放。

方案2：使用相对关键字自动适配 #

CSS提供了几个内置关键字，让渐变圆自动适配容器尺寸，无需手动计算百分比：

• closest-side：以圆心到容器最近边的距离作为半径
• farthest-side：以圆心到容器最远边的距离作为半径
• closest-corner：以圆心到容器最近角的距离作为半径
• farthest-corner（默认值）：以圆心到容器最远角的距离作为半径

示例代码（以closest-side为例）：

radial-gradient(circle closest-side at 5% 20%, red, blue 100%)

这个写法会让渐变圆的半径自动匹配容器的边距，完全适配容器的尺寸变化。

方案3：精确基于容器宽/高的百分比（结合CSS变量） #

如果需要严格基于容器的宽度或高度设置百分比半径，可以用CSS变量配合calc实现：

.container {
  background: radial-gradient(circle calc(100% * 0.3) at 5% 20%, red, blue 100%);
}

这里的calc(100% * 0.3)表示取容器宽度的30%作为半径（若要基于高度，可结合height相关的变量或单位），不过这种写法不如前两种简洁，适合有特殊精度要求的场景。

内容的提问来源于stack exchange，提问作者Matrix