现代浏览器已废弃marquee标签，所谓“科技感发光滚动条”实为自定义滚动条样式与内容发光动效的组合；css需用::-webkit-scrollbar定制webkit内核滚动条滑块发光，firefox不支持；内容发光应通过伪元素独立实现，避免与滚动逻辑耦合，并适配暗色模式。
marquee 标签早已失效，现代浏览器（Chrome、Firefox、Edge、Safari）不渲染或直接忽略它；所谓“科技感发光滚动条”，本质是两个独立需求的组合：一是滚动容器的自定义样式（即“滚动条”本身），二是内容区域的发光动效（如文字/背景光晕）。二者不能混为一谈，强行套用旧标签只会导致不可控、不可访问、且在深色模式下彻底失效。
如何用 CSS 自定义原生滚动条并加发光效果
浏览器原生滚动条（::-webkit-scrollbar 系列伪元素）仅支持 WebKit 内核（Chrome/Safari/Edge），Firefox 不支持，因此“发光滚动条”只能作用于滚动条轨道/滑块本身，无法跨浏览器统一实现。但如果你只面向 Chromium 系统（如内部管理后台），可这样写：
关键不是加 box-shadow，而是避免模糊溢出被裁剪——滚动条滑块默认有 border-radius 和 overflow: hidden，直接加发光会断边：
- 必须给
::-webkit-scrollbar-thumb显式设border-radius: 6px，再配box-shadow: 0 0 8px #0af, 0 0 16px rgba(0,120,255,0.5) - 禁用
background-clip: padding-box（默认值），否则发光被内边距裁掉 - 不要对
::-webkit-scrollbar-track加发光，它常被父容器overflow: hidden截断，反而显脏 - Firefox 用户看到的是默认灰色滚动条，无法降级为“发光灰”，只能接受 fallback —— 所以别把它当核心交互元素
为什么不能给滚动条整体加 text-shadow 或 filter: blur()
text-shadow 只作用于文本节点，滚动条不是文本；filter: blur() 会模糊整个滚动条区域（含箭头、轨道），导致控制失灵、点击热区偏移，且在 macOS 上触发重绘卡顿。更严重的是：filter 会让滚动条在 Retina 屏上发虚，尤其搭配 transform: scale(0.999) 这类 hack 时，光晕边缘出现明显锯齿。
真正可控的“科技感”来自两处：
- 滑块使用线性渐变 + 单层高斯模糊伪元素（
::before绝对定位 +z-index: 1），而非直接 filter 整体 - 轨道用
background: conic-gradient(from 90deg, #0af, #08f, transparent 40%)模拟环形光效，比纯色更显动态 - 禁用所有
transition: all，只对background-color和box-shadow做0.15s ease-out，防止 hover 时闪白
滚动内容区域的发光动效必须和滚动逻辑解耦
很多人想让“滚动条发光”时文字也跟着发光，这是误解。滚动容器（如 div）的发光应独立于滚动行为，否则 transform: translateX() 动画会因 GPU 层合并导致光晕抖动。正确做法：
- 发光层用
::after伪元素覆盖在内容上方，pointer-events: none避免遮挡点击 - 光晕动画用
@keyframes单独驱动，周期与滚动动画错开（如滚动 20s，光晕脉动 3.7s），避免视觉共振 - 移动端 iOS Safari 对
will-change: transform+ 多层box-shadow渲染异常，需用@supports (backdrop-filter: blur(1px))检测后降级为单层高亮 - 若内容含链接，发光层必须设
isolation: isolate，否则mix-blend-mode会导致文字颜色异常变深
最易被忽略的一点：发光效果在暗色模式下需手动适配。系统级 prefers-color-scheme: dark 不会自动反转 box-shadow 颜色，你得写两套变量，或用 color-mix(in srgb, #0af 70%, canvas) 动态混合背景色——否则深色背景下蓝光直接过曝，失去“科技感”只剩刺眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
