css变量无法直接用于radial-gradient()圆心坐标，需用js动态更新自定义属性并配合calc()或内联样式；鼠标坐标须归一化为容器内百分比，用requestanimationframe节流；聚光灯层宜用::before伪元素+mix-blend-mode实现，避免遮挡交互。
径向渐变的中心点怎么用CSS变量动态控制
不能直接把 radial-gradient() 的圆心坐标写成 var(--x) var(--y) —— CSS函数不支持在函数体内解析变量值。必须用 background-image 配合 calc() 或属性内联方式绕过这个限制，最可靠的是用 background 写死整个渐变声明，再通过 JS 实时更新自定义属性。
监听鼠标位置并同步更新CSS变量
关键不是“监听”，而是“防抖+节流+坐标归一化”。直接在 mousemove 里疯狂设 style.setProperty 会导致卡顿；且浏览器坐标（clientX/clientY）需转为相对于容器的百分比，否则渐变会错位。
- 用
requestAnimationFrame替代setTimeout节流，保证每帧最多更新一次 - 容器需设
position: relative，JS 中用getBoundingClientRect()算出鼠标在容器内的相对位置（0–100%） - 设置变量时统一用
px单位（如--x: 42px），避免在radial-gradient()中混用单位引发解析失败
聚光灯背景层的层级与混合模式
单纯叠加 radial-gradient 很容易盖住内容。必须用 mix-blend-mode: exclusion 或 screen 让渐变只“透出”亮区，同时确保该层 z-index 高于内容但低于交互元素（比如按钮）。
- 推荐用伪元素
::before实现聚光灯层，避免污染 DOM 结构 - 渐变颜色建议用
rgba(0,0,0,0.7)到transparent，太深会吞掉文字细节 - 务必加
pointer-events: none，否则遮罩层会拦截鼠标事件
兼容性与 fallback 处理
Firefox 早于 96 版本不支持在 radial-gradient() 中使用 CSS 变量做位置参数；Safari 对 mix-blend-mode 在某些嵌套场景下渲染异常。没有万能 fallback，但可以降级为静态暗角。
- 用
@supports (background: radial-gradient(circle at var(--x) var(--y), ...))包裹动态逻辑 - 降级方案：给容器加一层固定暗角图片（
background: url("vignette.png")），仅当不支持变量渐变时生效 - 移动端慎用——触摸事件坐标不稳定，且
requestAnimationFrame在 iOS Safari 后台标签中可能暂停
devtools 调 --size 变量，而不是凭感觉估算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
