纯CSS实现鼠标跟随发光边框的最佳方案是conic-gradient，通过background-position动态锚定鼠标位置，配合background-clip:padding-box、大background-size和伪元素遮罩层精准抠出环形光效。
用 background: conic-gradient() 实现鼠标跟随的发光边框
直接说结论：纯 CSS 做真·鼠标跟随高亮边框，conic-gradient 是目前最可控、最轻量的方案。它不依赖 JS 监听坐标，也不需要 transform 动画抖动，靠背景裁剪就能“骗”出动态光效。
关键在于把渐变中心锚点设为鼠标位置，再用 background-position 动态更新 —— 但注意：conic-gradient 本身不支持变量定位，所以得靠 background-position: x y 配合 background-size 和 background-clip 联动模拟。
- 必须给容器设
background-clip: padding-box，否则渐变会溢出到内边距甚至内容区 -
background-size要足够大（比如300% 300%），不然鼠标一移就断层 - 遮挡层不是“黑色卡片”，而是用伪元素
::before叠一层background: #000+inset圆角，留出边框空隙 - 别用
box-shadow模拟——它无法跟随鼠标，且多层阴影性能差、边缘发虚
为什么不用 radial-gradient 或 linear-gradient
radial-gradient 看似更直觉，但它只能以固定点为中心扩散；鼠标移动时，你得用 JS 实时改 background-position，而 CSS 自身无法读取鼠标坐标。结果就是卡顿、延迟、边界突变。
linear-gradient 更不行——它只有方向，没有“围绕某点旋转”的语义，强行做只会得到一条斜线扫过，不是环形高亮。
立即学习“前端免费学习笔记（深入）”；
-
conic-gradient天然支持角度旋转，配合background-position移动中心点，视觉上就是“光从鼠标处炸开” - 浏览器对
conic-gradient的硬件加速支持已很成熟（Chrome 85+、Firefox 83+、Safari 16.4+） - 旧版 Safari 不支持
conic-gradient？那就退化为静态box-shadow，别硬撑
遮挡层怎么精准抠出“发光边框”形状
所谓“黑色遮挡”，本质是盖住卡片主体，只露出一圈透明缝隙——这圈缝隙就是发光区域。不能靠 outline 或 border，因为它们不参与背景渲染，也没法被渐变穿透。
正确做法是：主容器设 position: relative，伪元素 ::before 绝对定位铺满，然后用 inset(2px)（或具体像素值）向内收缩，再设 border-radius 匹配主容器圆角。
- 遮挡层
background必须是纯黑（#000）或透明黑（rgba(0,0,0,0.9)），太浅会透出底层渐变，削弱发光感 - 主容器自身不要设
border或outline，否则和遮罩错位，边缘出现双线 - 遮罩的
z-index必须低于主内容（比如文字、图标），否则内容被盖住 - 如果卡片有内边距（
padding），遮罩的inset值要等于边框宽度，否则发光带宽窄不一致
真实项目里最容易漏掉的三个细节
写完跑起来发现“光不动”“边框断开”“鼠标移出就消失”——八成栽在这三处：
- 没加
transition: background-position 0.15s ease-out，导致位置跳变，不像跟随，像闪烁 - 容器缺少
overflow: hidden，遮罩或渐变溢出到父容器外，尤其在 flex/grid 子项中极易发生 - 监听鼠标事件用了
mousemove却没节流，JS 更新style.backgroundPosition过频，触发重排重绘，反而比纯 CSS 慢
复杂点不在写法，而在“哪一层该透明、哪一层该截断、哪个 transition 该加在哪”。漏一个，整套光效就塌一半。
