1. 使用 :focus 实现边框与阴影的基础原理
1.1 伪类 :focus 的作用与目标
在网页表单中，聚焦状态是用户与界面互动的关键时刻，它告诉用户当前输入对象被选中并准备接受输入。通过 CSS 的 :focus 伪类，我们可以在元素获得焦点时改变边框、颜色以及阴影的呈现，从而提升可用性和可访问性。
为了实现干净的聚焦效果，通常需要为输入框设置一个清晰的边框颜色和一个可辨识的阴影层级。直接去掉原生的默认轮廓并用自定义效果替代，可以让页面的风格更加一致，但要确保无障碍性不被破坏。
下面的代码片段展示了一个基础的聚焦风格：当输入框获得焦点时，边框颜色变成蓝色，阴影出现，并且保持过渡平滑。这是实现 CSS 输入框聚焦时边框与阴影过渡的核心思路。
/* 基础输入框样式 */
.input-base {border: 1px solid #d1d5db;border-radius: 6px;padding: 10px 12px;background: #fff;color: #1f2937;transition: border-color 0.2s ease, box-shadow 0.2s ease;/* 其他常用样式 */width: 100%;box-sizing: border-box;
}
1.2 :focus 的必要属性与禁用原生轮廓
在多数浏览器中，默认聚焦轮廓是可访问性的重要提示，直接移除可能降低键盘导航的可用性。因此，很多方案会选择在保留聚焦指示的同时，使用自定义阴影与边框来替代默认轮廓。通过 outline: none; 结合自定义 box-shadow 实现无缝切换，能实现既美观又可访问的聚焦效果。
需要注意的是，在实现时要考虑不同浏览器的渲染差异，确保阴影参数在各平台上表现一致。使用统一的单位与颜色变量有助于跨组件统一风格，提升维护性。
2. 过渡与动画：让聚焦切换更平滑
2.1 过渡属性的组合使用
实现平滑的边框与阴影切换，关键在于为相关属性设置过渡时间与缓动函数。transition: border-color 0.2s ease, box-shadow 0.2s ease 能同时对边框颜色和阴影进行动画，从而在获得焦点时形成自然的视觉效果。
同时，为了避免闪烁或跳动，可以在初始状态和聚焦状态之间保持一致的边框宽度与圆角。稳定的布局避免因阴影导致的排版抖动，提升用户体验。
/* 过渡效果示例 */
.input-base {border: 1px solid #d1d5db;transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-base:focus {border-color: #66afe9;box-shadow: 0 0 0 4px rgba(102, 175, 233, 0.25);outline: none;
}
2.2 使用 :focus-visible 增强无障碍
为了避免在鼠标悬停时触发视觉干扰，可以结合 :focus-visible，仅在键盘导航时显示聚焦指示。这是一种符合无障碍最佳实践的策略，也能让页面在移动端减少冗余视觉效果。
结合 :focus-visible 的组合，可以在桌面端保留直观的聚焦提示，在触屏端保持简洁美观。请确保在不支持 :focus-visible 的浏览器中仍然提供可用的聚焦指示，以避免可访问性下降。
/* :focus-visible 示例 */
.input-base:focus-visible {border-color: #66afe9;box-shadow: 0 0 0 4px rgba(102, 175, 233, 0.28);outline: none;
}
3. 实践技巧：在不同场景中的应用
3.1 单行文本输入的视觉设计
对于单行输入框，高度与内边距应与整体表单保持协调，避免在聚焦时占用过多垂直空间，影响布局稳定性。通过轻微的阴影与微小的边框色变，能让用户清晰感知当前焦点对象。
此外，颜色对比度要充足，确保聚焦状态在低光环境下也能清晰辨识。将主题色作为聚焦色的主色，能够提升品牌一致性。
/* 单行输入的聚焦风格示例（简化版） */
.input-single {border: 1px solid #d1d5db;border-radius: 6px;padding: 10px 12px;transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-single:focus {border-color: #2563eb;box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);outline: none;
}
3.2 下拉框与按钮的聚焦风格
除了文本输入，下拉框、搜索框以及按钮等控件同样需要一致的聚焦视觉，以便用户能够快速定位当前控件并进行操作。通过统一的边框与阴影风格，可以在整页形成统一的视觉语言。
在按钮上应用相同的逻辑时，阴影的扩展半径可以增强可点击区域的触控体验，从而提升交互的响应性。
/* 下拉框聚焦示例 */
.select-base {border: 1px solid #d1d5db;border-radius: 6px;padding: 10px 12px;background: #fff;transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.select-base:focus {border-color: #36a3f7;box-shadow: 0 0 0 4px rgba(54, 163, 247, 0.25);outline: none;
}
4. 兼容性与性能考量
4.1 浏览器差异与回退策略
不同浏览器对阴影的渲染和边框的平滑程度可能存在差异，因此在设计时应采用 渐进增强的策略，先实现核心功能，再逐步优化视觉细节。通过使用 CSS 变量和统一的色系，可以快速在多浏览器环境中保持一致性。
此外，避免过多的阴影层级与过度装饰，有助于提升页面渲染性能，特别是在低端设备上。简单、稳定的聚焦效果通常更具可维护性。
/* 使用 CSS 变量实现全局风格的一致性 */
:root {--focus-border: #66afe9;--focus-shadow: rgba(102, 175, 233, 0.25);
}
.input-base {border: 1px solid #d1d5db;transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-base:focus {border-color: var(--focus-border);box-shadow: 0 0 0 4px var(--focus-shadow);outline: none;
}
5. 实践案例：一个简易的表单样式模板
5.1 HTML 结构与 CSS 组合示例
下面给出一个简易表单的结构示例，以及对应的聚焦风格应用。通过组合输入框、下拉框和按钮，形成一个统一的视觉风格。确保语义化标签与无障碍属性齐全，以实现良好的可用性。
在实际项目中，可以将该样式封装成一个可复用的组件，通过 CSS 变量实现主题切换，方便在多页面应用中统一风格。
<form class="form-demo" aria-label="示例表单"><label>姓名<input class="input-base" type="text" placeholder="请输入姓名" /></label><label>城市<select class="select-base"><option>北京</option><option>上海</option><option>广州</option></select></label><button type="submit" class="btn-base">提交</button>
</form>
/* 表单模板的聚焦统一样式（综合应用） */
.form-demo .input-base,
.form-demo .select-base {border: 1px solid #d1d5db;border-radius: 6px;padding: 10px 12px;background: #fff;transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-demo .input-base:focus,
.form-demo .select-base:focus {border-color: var(--focus-border);box-shadow: 0 0 0 4px var(--focus-shadow);outline: none;
}
块给出。
