css变量不能直接控制radial-gradient的透明度或半径，因浏览器将整个函数参数视为静态语法，var()在颜色停点或尺寸位置会被判为无效值；仅颜色值和百分比停点位置可安全替换，如--darken-color和--fade-stop；推荐用--darken-alpha和--fade-distance双变量分别控制浓度与范围，配合inset:0和相对单位实现自适应暗角。
为什么不能直接用 CSS 变量控制 radial-gradient 的透明度或半径
因为 radial-gradient() 是一个函数，浏览器在解析时会把整个参数列表当作静态语法处理；var(--opacity) 或 var(--radius) 如果出现在颜色停点或尺寸位置（比如 transparent 70%），会被视为无效值，导致整条渐变声明 fallback 到默认色或失效。你看到的“没变化”或“全黑/全透”，大概率是这个原因。
radial-gradient 中哪些参数能被变量安全替换
只有颜色值和百分比停点位置可以抽成变量——前提是它们出现在函数参数的「值」位置，且不破坏语法结构。例如：
-
--darken-color: rgba(0, 0, 0, 0.6)✅ 可用于radial-gradient(circle at center, var(--darken-color) 0%, transparent 70%) -
--fade-stop: 75%✅ 可用于transparent var(--fade-stop) -
--gradient-angle❌ 不能用于radial-gradient(circle at center ...)，因为径向渐变没有角度参数 -
--shape❌ 不能动态设为circle或ellipse，函数名本身不可变量替换
如何让暗角强度真正可调：推荐的变量组合方案
把暗角拆成两个独立可控维度：浓度（靠颜色透明度）和范围（靠远端停点位置）。这样既避免硬编码，又保留语义清晰性：
- 父容器必须有
position: relative，否则::before会脱标 -
::before使用inset: 0+pointer-events: none，确保覆盖精准且不拦截点击 - 定义变量：
--darken-alpha: 0.5控制黑度，--fade-distance: 80%控制暗角扩散程度 - 渐变写成：
radial-gradient(circle at center, rgba(0,0,0,var(--darken-alpha)) 0%, transparent var(--fade-distance)) - 修改强度只需改两个数字，不用动结构，也不影响缩放适配
容易忽略的缩放兼容细节
如果图片用了 object-fit: cover 或容器宽高比与原图不一致，仅靠 100% 宽高会让暗角错位。此时必须：
- 给
img加display: block，消除底部留白 - 伪元素继续用
inset: 0（它比top/left/width/height更可靠） - 把
--fade-distance设为150%或200%，而非固定70%—— 这样即使图片被裁剪，暗角边缘仍能自然溢出到可视区域边界
变量本身不会自动响应缩放，但用相对单位（%）+ inset + 合理的起始半径，才是暗角随图自适应的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
