css变量可安全用于radial-gradient的颜色值、百分比位置和长度单位，但不能用于形状（circle/ellipse）、尺寸关键词（closest-side）或at后的位置语法本身；需用@property声明变量类型以支持平滑动画。
直接用 CSS 自定义属性（-- 开头的变量）控制 radial-gradient 的颜色、位置、尺寸是可行的，但必须绕开浏览器对函数参数的解析限制——radial-gradient() 不接受变量直接插在括号里当参数，否则整条声明会被忽略。
radial-gradient() 里哪些部分能用 CSS 变量
CSS 变量只能安全用于 radial-gradient 的颜色值、百分比位置、长度单位（如 px、%），但不能用于形状（circle/ellipse）、尺寸关键词（closest-side）、或 at 后的位置语法本身。例如：
-
--color1: #ff6b6b✅ 可以用在radial-gradient(..., var(--color1) 0%, ...) -
--pos: 50% 30%✅ 可以用在radial-gradient(circle at var(--pos), ...)（现代浏览器支持，Chrome 110+、Firefox 115+、Safari 16.4+） -
--shape: circle❌ 不能写成radial-gradient(var(--shape) at ...)，会失效 -
--size: farthest-corner❌ 同样不被识别，必须硬编码
多重径向渐变叠加时的变量管理难点
多个 radial-gradient 用逗号拼在 background-image 里时，每个渐变都可能需要独立控制中心点、大小、颜色——变量一多就容易命名冲突或逻辑耦合。常见错误现象包括：
- 所有光晕都叠在同一个位置，看不出层次：因为
var(--center-x)和var(--center-y)被所有渐变共用 - 某个渐变突然消失：因为某一层用了未定义的变量（如
var(--glow2-color)拼写错成glwo2-color），整层渐变被丢弃 - IE/Edge 旧版（≤18）或 Safari ≤15.6 完全不渲染：这些浏览器不支持
var()在radial-gradient的at位置中使用
建议为每层渐变设独立前缀：--glow1-center、--glow2-center、--glow1-color，并用 :where() 或单独类名做作用域隔离。
用 calc() + 变量微调径向渐变尺寸和偏移
虽然 closest-side 这类关键词不能变量化，但你可以用 calc() 配合变量模拟类似效果。比如想让光晕半径随容器宽度缩放：
background-image:
radial-gradient(
circle at var(--x1) var(--y1),
var(--c1) 0%,
transparent 70%
),
radial-gradient(
circle at var(--x2) var(--y2),
var(--c2) 0%,
transparent calc(50% + var(--offset, 10px))
);
注意：
-
calc()内部可以混用变量、数字、单位，但不能出现空格分隔的关键词（如calc(var(--size) side)是非法的） -
transparent后面的百分比/长度必须带单位（70%或100px），不能只写70 - 如果某层需要响应式尺寸，建议用
clamp()替代固定calc()，例如clamp(20px, 5vw, 80px)
真正动态的方案：用 @property 声明受控变量
若你依赖动画或 JS 动态修改变量值（比如鼠标移动时实时更新光晕中心），必须用 @property 显式声明类型，否则动画会卡顿或跳变：
@property --glow-x {
syntax: "<length>";
inherits: false;
initial-value: 50%;
}
@property --glow-y {
syntax: "<length>";
inherits: false;
initial-value: 50%;
}</length></length>
然后才能在 transition 或 @keyframes 中平滑驱动它：
.cursor-glow {
background-image: radial-gradient(
circle at var(--glow-x) var(--glow-y),
rgba(255, 255, 255, 0.6) 0%,
transparent 60%
);
transition: --glow-x 0.15s, --glow-y 0.15s;
}
没加 @property 声明的变量，在动画中会被当作“非可动画属性”，浏览器降级为逐帧重绘，性能差且边缘模糊。
最易被忽略的一点：radial-gradient 中的透明色过渡必须显式写 transparent，不能靠 rgba(0,0,0,0) 代替——后者在部分 Safari 版本里会被当成不透明黑，导致光晕边缘发灰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
