赛博朋克按钮核心是红蓝反向偏移的box-shadow叠加：4px 4px 12px #ff0066与-4px -4px 12px #00f0ff；hover需同步调整outline、filter及偏移，禁用text-shadow，深色背景配蓝调亮文，移动端需touch-action或JS增强反馈。
如何用 box-shadow 实现红蓝错位投影
赛博朋克按钮的“悬浮发光感”核心不是渐变或背景色，而是两层 box-shadow 的偏移叠加：一层向右下偏移的红色阴影 + 一层向左上偏移的蓝色阴影。关键在方向相反、颜色对比强、模糊值适中（太小没光晕，太大糊成一团）。
常见错误是两层都往同一方向偏移，结果只是加粗边框；或者模糊值设成 0，失去发光质感。
-
box-shadow: 4px 4px 12px #ff0066, -4px -4px 12px #00f0ff;—— 这是最小可用组合：正偏移红 + 负偏移青蓝，12px模糊让光自然弥散 - 避免用
#0000ff这类纯蓝，赛博感依赖高饱和青蓝色，#00f0ff或#00d1ff更准 - 不要在
:hover里只改box-shadow模糊值，必须同步调整偏移量和颜色饱和度，否则悬停前后像两个按钮
hover 时用 outline + filter 做动态亮边
单纯靠 box-shadow 悬停变亮不够“锋利”，真正有冲击力的是叠加一层高亮轮廓 + 短暂锐化。这里不用 border（会撑开布局），而用 outline 配合 filter: brightness(1.8) contrast(1.3)。
容易忽略的是 outline 的渲染层级和动画卡顿问题：它默认不参与 CSS 动画缓存，直接写 transition: outline 0.3s 会掉帧。
立即学习“前端免费学习笔记（深入）”；
- 必须给按钮加
outline: 0;重置默认焦点样式，再单独定义:hover下的outline - 推荐写法：
outline: 2px solid #ff00cc; filter: brightness(1.6) contrast(1.4); transition: filter 0.25s, outline 0.25s; - 别用
blur()或drop-shadow()替代box-shadow，性能差且在 Safari 里表现不稳定
字体与背景的对比度陷阱
红蓝投影再炫，文字看不清就白搭。赛博朋克不是牺牲可读性，而是用反差强化风格。深色背景（如 #0a0a1a）配浅色文字（#e0e0ff）是安全起点，但要注意投影颜色对文字边缘的干扰。
最常踩的坑是把文字颜色设成纯白 #ffffff——在蓝紫投影下会发灰，实际看起来像脏了。
- 文字颜色建议用带一点蓝调的亮色：
color: #d0d0ff;或color: hsl(240, 100%, 85%); - 禁用
text-shadow模拟发光，它和box-shadow叠加后会产生不可控的晕染，尤其在 Firefox 中 - 如果按钮背景用了
linear-gradient，务必确认 gradient 角度避开文字区域，否则文字下方出现色带
移动端触摸反馈失效怎么办
PC 上 :hover 没问题，但手机端第一次点击没反应、第二次才亮，是因为移动端没有持续 hover 状态，浏览器延迟触发伪类。
这不是 bug，是规范行为。强行用 :active 补救也不够，因为触摸释放后效果立刻消失。
- 给按钮加
touch-action: manipulation;，提升触摸响应优先级 - 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免在纯触摸设备上加载无用规则 - 真要兼容所有设备，可加一层 JS 监听
touchstart，临时添加 class 触发同款亮边样式，但仅限必要场景
4px 偏移写成 6px，整体会从“霓虹灯”变成“坏掉的LED屏”。 
