Tailwind CSS的ring和border同时使用为什么显示异常？

ring“压住”border是因为其绝对定位不参与盒模型，直接叠在边框上；ring-offset需与ring成对使用且颜色匹配背景，圆角必须由宿主元素自身设置rounded类。

ring 为什么“压住”了 border

因为 ring 是绝对定位的伪元素，不参与盒模型计算——它不会被 border、padding 或 border-radius 推开。当你同时写 border 和 ring，ring 就会直接叠在边框上，视觉上像加粗、发虚，甚至裁掉圆角。

1. 输入框加 focus:ring-blue-500 和 border-gray-300，边缘变厚、失去清晰边界
2. 带 rounded-lg 的按钮，ring 仍是直角，圆角被“切断”
3. 图标按钮里 ring 紧贴内容，没有呼吸感，显得拥挤

ring-offset 不是 padding，也不能单独用

ring-offset-{width} 并不是给宿主元素加内边距，而是为 ring 伪元素“预留一层背景色空间”，让环从这个偏移层开始绘制。它的作用对象是 ring 自身的起始位置，不是你写的那个按钮或输入框。

1. 必须成对使用：ring-offset-2 ring-offset-white ring-2 ring-blue-500，否则 ring-offset-2 完全无效
2. ring-offset-0 反而让问题更明显：它强制 ring 从元素边缘（含 border 外缘）紧贴绘制，放大重叠
3. ring-offset 的颜色必须匹配宿主背景，否则会出现色差边；深色模式下别硬写 ring-offset-white，改用 dark:ring-offset-gray-900

圆角被截断？不是 ring-offset 没设，是 rounded 没同步加

ring 本身不控制形状，ring-offset 更不负责圆角。能否呈现弧形环，取决于宿主元素是否设置了 rounded-{size}，且该类必须和 ring 在同一个元素上生效。

1. 常见错误：父容器设了 rounded-lg，但 ring 加在子元素上 → 子元素没圆角，ring 就是直角
2. ring-inset 场景下，ring-offset 几乎无意义——inset ring 本就向内绘制，offset 会把它进一步“陷”进背景
3. 如果用了 UI 库（如 DaisyUI），检查其 focus 注入的 ring 类是否带 border-radius: 0，这会直接覆盖你的 rounded-full

键盘焦点失效？outline-none 删了但没补 ring

很多项目用 outline-none 去掉默认焦点框，再靠 ring 替代。但如果 ring 因偏移/颜色/尺寸问题不可见，键盘用户就彻底失去焦点感知。

1. 确保 ring 有足够对比度：深色背景配 ring-blue-300 可能看不清，换成 ring-blue-500
2. 尺寸不能太小：ring-1 在高 DPR 屏幕上可能糊成一条线，ring-2 更稳妥
3. 别只在 hover 或 active 下加 ring，focus 才是可访问性关键路径

真正卡住人的从来不是“要不要加 ring”，而是 ring-offset 必须和 ring 成对出现、颜色必须匹配背景、圆角必须由宿主元素自己承担——这三个点漏掉任何一个，视觉和可访问性都会出问题。