:focus边框颜色不生效主因是样式被覆盖，如框架重置outline后未补border-color，或同选择器混用硬编码与变量；应统一用border-color: var(--focus-color)并检查computed值确认变量是否生效。
直接用 var(--focus-color) 替代硬编码色值，再配合 :focus 或 :focus-within 伪类，就能实现真正可维护、可主题切换的动态焦点状态。
为什么:focus边框颜色总不生效？
不是变量没起作用，而是样式被覆盖了——比如 Bootstrap 的重置规则写了 *:focus { outline: none }，又没补回 border-color；或者你在同一个选择器里混用了硬编码和变量：border: 1px solid #ccc; border-color: var(--focus-color);，后者大概率被忽略。
- 检查浏览器开发者工具的 Computed 面板，确认最终生效的
border-color是不是来自var(--focus-color)，而不是已计算出的 RGB 值 - 确保所有聚焦样式只通过
border-color、box-shadow等属性引用变量，别在同一条规则里写死其他边框属性 -
input:focus要显式包含textarea和select，它们默认行为不一致，漏掉就会出现“部分控件不响应”
怎么让:focus支持深色/浅色主题自动切换？
靠 :root + 媒体查询 + JS 动态修改三者配合。变量本身不感知主题，得靠外部触发更新。
- 在 CSS 中定义基础变量：
:root { --focus-color: #3b82f6; } - 用媒体查询覆盖暗色模式：
@media (prefers-color-scheme: dark) { :root { --focus-color: #4ecdc4; } } - 用户手动切换时，JS 改
document.documentElement.style.setProperty('--focus-color', '#ff6b6b')，不要用body元素设，作用域不对 - 如果用类名控制主题（如
），变量要写成:root.dark { --focus-color: ... }，而非.dark :root
:focus-within 比 :focus 更适合搜索框高亮？
是的，尤其当搜索区域包含图标、清空按钮等子元素时。:focus 只能作用于 input 自身，而 :focus-within 让整个包裹容器响应内部任意可聚焦元素的状态。
- 父容器必须有明确边界（如
border-radius），否则光晕效果会溢出 - 非输入类子元素（如清空按钮）建议加
tabindex="-1"，避免意外触发:focus-within - 用
--glow-radius和--glow-spread控制box-shadow，比写死像素值更灵活：box-shadow: 0 0 var(--glow-radius) var(--glow-spread) rgba(33, 150, 243, 0.3) -
--glow-radius设为0会退化成实线边框，--glow-spread为负值易导致光晕不可见，慎用
移除 outline 后怎么保证键盘用户不丢焦点？
删 outline: none 是最常见也最危险的操作。可访问性要求：只要隐藏默认 outline，就必须提供至少两项视觉变化来替代。
- 组合使用
border-color+box-shadow最稳妥，比如border: 2px solid var(--focus-color)加box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) - 避免纯背景色变化，若要用，透明度 ≤ 0.05（如
background-color: rgba(59, 130, 246, 0.03)），否则影响文字可读性 - iOS Safari 对
:focus支持不稳定，需搭配:focus-visible渐进增强，且不能依赖它作为唯一焦点提示 - 动画别太重——
box-shadow模糊半径超过20px或叠加多层，在快速 Tab 切换时可能卡顿
变量本身不解决可访问性，只是把颜色、阴影、尺寸这些可变参数从样式里抽出来。真正关键的是：你是否为每种焦点状态都提供了足够强、足够鲁棒的视觉反馈，而不是只盯着“颜色变了没”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
