焦点环画在圆角外会露出四角

**「边框四角有奇怪的蓝色阴影」不是边框坏了,是 focus ring 画在圆角边框外侧:通用 `Input` 自带 `focus-visible:ring-3 focus-visible:ring-ring/50`,ring 在圆角外圈露出一圈蓝色。修法是针对这个输入框 `focus-visible:ring-0` 并保留蓝色边框,不要动通用组件。**

怎么认出来

  • 现象集中在四角,不是整条边 —— 圆角处 ring 与边框之间露出的面积最大。
  • 只在聚焦时出现(点进输入框编辑时才看到)。
  • 追溯来源是继承的通用样式,不是这个组件自己写的边框。

做法

只改出问题的那一个输入框(例:简历名称):

保留蓝色边框
focus-visible:ring-0   去掉外圈 ring

不动通用 Input —— 否则会影响其它表单输入框的聚焦反馈。

相关

  • 样式丢失先核对类名再怀疑缓存与权限 —— 同源:先确认是哪个样式在生效,再怀疑环境
  • 讲bug先讲现象再讲根因 —— 沟通侧:先说"四角有蓝影",再说 ring
  • 控件参数要在下游被消费 —— 同一天、同一编辑器的另一处"样式看起来不对"
  • 折叠动画要有收起态过渡 —— 同一天同一编辑器的另一处「通用组件默认行为」问题
  • 可调与固定的边界按语义划分 —— 同源:改动要落在正确的那一层(单个输入框 vs 通用组件)