radial-gradient光晕需CSS变量带px单位，坐标须经容器rect转换并clamp边界，移动端用touchmove[0]加passive，推荐伪元素+rgba渐变+小数坐标提升平滑度。
radial-gradient + CSS 变量必须用像素单位，不能混用 % 和 px
光晕中心定位靠的是 radial-gradient(circle at var(--mouse-x) var(--mouse-y), ...)，而 CSS 变量本身无单位，所以 --mouse-x 的值必须带 px（比如 '123px'），写成 '50%' 或漏掉单位都会导致语法错误或错位。
常见错误现象：光晕固定在左上角不动——多半是 JS 写入时没加单位，或用了 % 但容器宽高未固定，导致百分比计算失真。
- 推荐统一用像素：JS 中用
e.clientX - rect.left + 'px'计算相对坐标 - 如果要用百分比（比如适配缩放/响应式），变量值就得是
'42%'，且所有相关背景、遮罩的尺寸也得用 % 单位对齐 -
calc()里可以混合单位（如calc(var(--mouse-x) - 50px)），但变量自身不能既存数字又期待浏览器自动补单位
监听 mousemove 时必须做容器坐标转换，否则滚动/缩放下光晕漂移
直接用 e.clientX/e.clientY 得到的是视口坐标，一旦容器有 scrollLeft/scrollTop 或 transform: scale()，光晕就会偏移。
正确做法是每次事件触发时，先调用 container.getBoundingClientRect() 获取容器左上角相对于视口的位置，再做减法：
立即学习“前端免费学习笔记（深入）”；
const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top;
若容器支持缩放（如 scale(1.2)），还要除以缩放系数：x /= window.getComputedStyle(container).transformMatrix?.a || 1（简化起见，可用 container.style.transform 解析，或直接监听 resize + scroll 重算）。
- 别把变量写进
:root，否则全站生效；应绑定到目标容器的style上：container.style.setProperty('--mouse-x', x + 'px') - 移动端需额外监听
touchmove，取e.touches[0].clientX，而非changedTouches - 高频移动下可包一层
requestAnimationFrame避免丢帧，但不是必须——多数场景直接更新即可
光晕边缘生硬或闪烁？关键在渐变参数和 will-change
用 radial-gradient 做光晕时，停靠点设置不合理会导致衰减过快（硬边）或过渡模糊（发虚）。典型写法是：
background: radial-gradient( circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.3) 0%, transparent 60% );
其中 60% 是半径比例，数值越大光晕越扩散；若想更柔和，可加一个中间透明过渡层：
rgba(255,255,255,0.15) 40%, transparent 70%
容易被忽略的是渲染精度问题：JS 写入整数坐标（如 '123px'）时，浏览器可能跳帧；传小数（'123.42px'）并配合 will-change: background-position 能显著改善平滑度。
- 避免在
body或大容器上直接设该背景——重绘区域过大，建议用伪元素::before层叠 - 别用
opacity控制光晕强度，它会透出子元素；改用rgba()的 alpha 值更安全 - 如果容器用了
backdrop-filter，光晕背景仍正常作用于滤镜后画面，无需额外处理
移动端 touchmove 兼容必须用 touches[0]，且 passive 不可少
iOS Safari 和安卓 Chrome 对 touchmove 默认不触发，且多点触控时只有 touches[0] 是主指针坐标。用 changedTouches[0] 会导致首次触摸无响应、后续拖动跳变。
监听时务必加 { passive: true } 提升滚动性能，否则 iOS 下页面可能卡顿：
container.addEventListener('touchmove', e => {
const t = e.touches[0];
container.style.setProperty('--mouse-x', (t.clientX - rect.left) + 'px');
}, { passive: true });同时监听 mousemove 和 touchmove 是必须的，但别合并事件处理器——它们的坐标获取方式不同，强行共用逻辑易出错。
- PC 端优先用
mousemove，移动端 fallback 到touchmove，不要试图用同一套坐标逻辑覆盖两者 - 首次触摸时，可触发一次
mousemove模拟，避免“第一次没光晕”的体验断层 - 注意：Safari 15.4+ 才稳定支持
mask-image，若用该方案需降级到radial-gradient+background
实际最常被忽略的，是容器坐标转换后的边界处理——当鼠标移出容器可视区时，x 或 y 可能为负或超限，不 clamp 就会导致光晕飞出画布。简单加个 Math.max(0, Math.min(width, x)) 就能稳住。
