焦点环
键盘 Tab 走到哪，哪里亮起一圈描边——无障碍的底线
实时预览（拖动参数，立刻看变化）
代码
<button>主要按钮</button>
<style>
/* 只去掉鼠标点的焦点，不要把键盘焦点一起杀掉 */
:focus { outline: none; }
:focus-visible {
outline: 2.5px solid #141414;
outline-offset: 3px;
}
/* 品牌色项目把 #141414 换成你的主色；深色底上用浅色环 */
</style><button class="focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-neutral-900">主要按钮</button>/* React 无需特殊处理：全局 CSS 里写好 :focus-visible 规则即可（同 html-css 档）。
切记不要为了「好看」全局 outline: none 又不给键盘用户补环。 */代码片段以 MIT 释出，可自由复制改用。
这个效果是怎么实现的
它是怎么工作的（中文）
秘诀在 :focus-visible：浏览器只在键盘（等非指针）操作时匹配它，鼠标点击不出现。做法是先 :focus { outline: none } 去掉默认，再给 :focus-visible 画一圈 2–3px 的描边 + 2–3px 偏移。颜色要在任何背景上都看得见；深色 UI 里记得换浅色环。这条效果删了 outline 又不补环，就是亲手把键盘用户关在门外。
How it works (English)
The trick is :focus-visible: browsers match it for keyboard (non-pointer) interaction only, not mouse clicks. Remove the default with :focus { outline: none }, then draw a 2–3px outline plus 2–3px offset on :focus-visible. The color must read on any background — swap to a light ring in dark UIs. Removing outlines without restoring a ring locks keyboard users out.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。