发光线条输入框需组合无边框、外发光与线条视觉暗示，关键在通过方向性模糊、高度压缩和透明度梯度模拟线条感，而非简单box-shadow。
发光线条输入框不是加个 box-shadow 就完事——它本质是“无边框 + 外发光 + 线条视觉暗示”的组合，:focus 只是触发开关，关键在怎么让光“看起来像一条线”而不是一团晕。
为什么直接写 input:focus { box-shadow: 0 0 8px #007bff; } 看起来像光斑而不是线条
因为默认 input 有 border，你加的阴影被边框截断、被 outline 盖住，还缺乏纵向延展感。所谓“线条”，其实是靠阴影的**方向性模糊 + 高度压缩 + 透明度梯度**模拟出来的。
- 去掉原生边框：
border: none或border: 2px solid transparent（后者保留点击热区） - 用
outline: none清掉浏览器默认蓝框，否则它永远压在 shadow 上面 - 把
box-shadow的模糊半径设小（2px–4px），扩散半径设为0，再配合height和padding控制视觉厚度 - 示例：
input:focus { box-shadow: 0 2px 0 0 #007bff; }—— 这会在输入框底部投出一条 2px 高、无模糊的纯色“光条”，比全向发光更接近“线条”感
如何让发光线条只出现在底部（或顶部）而不绕边
靠 box-shadow 的偏移量控制位置，不是靠 inset（那是内阴影）。外发光要“贴边”，就得用垂直偏移 + 极小模糊 + 零扩散。
- 底部发光线条：
box-shadow: 0 2px 2px -1px rgba(0, 120, 255, 0.4)（下移 2px，轻微模糊，负扩散收边） - 顶部发光线条：
box-shadow: 0 -2px 2px -1px rgba(0, 120, 255, 0.4) - 避免写
0 0偏移——那会均匀发散，失去线条指向性 - 如果用了
border-radius，发光线条会自然圆角；但若想保持直角线条，可给border-bottom-left-radius: 0单独重置
移动端点击没反应？重点检查 user-select 和 tabindex
iOS Safari 和部分安卓 WebView 对 :focus 触发很保守，尤其当父容器设置了 user-select: none 时，输入框根本拿不到焦点——不是 CSS 问题，是 DOM 层级阻断。
- 快速验证：给
input加临时样式input:focus { outline: 2px solid red !important; }，真机点一下，看红框出不出 - 如果不出，检查所有祖先元素是否含
user-select: none或pointer-events: none - 保险起见加
tabindex="0"，哪怕它本就可聚焦 - 不推荐只用
:focus-visible替代 —— 它在触屏点击时默认不激活，会丢掉大部分移动端用户
过渡动画卡顿或闪烁？别用 transition: all
all 会强制监听所有属性变化，包括 width、color 这些和发光无关的项，容易触发不必要的重绘，尤其在低端 Android 设备上明显掉帧。
- 只过渡需要动的部分：
transition: box-shadow 0.2s ease, border-color 0.2s ease - 时间控制在
0.15s–0.25s之间，超过0.3s就显得迟滞 - 别在
:focus规则里写transition，必须写在基础input上，否则首次聚焦无动画 - 如果用了两层
box-shadow模拟光晕，确保它们都包含在同一个transition声明中，否则会出现错位动画
最容易被忽略的，是“线条感”其实不来自 shadow 本身，而来自它和周围空白的对比强度——背景越暗，同参数的发光越像线；背景越亮，就得加大透明度或改用更深的 base color。调效果时，别只盯着代码，多换几个真实背景色试试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
