使用Tailwind CSS的border-radius与ring-offset时按钮伪影如何修复？

当按钮同时使用Tailwind CSS的rounded-md（圆角）、focus:ring-1（聚焦环）和focus:ring-offset-4（环偏移）样式时，角落出现的伪影是由于聚焦环的矩形渲染逻辑与按钮圆角不匹配导致的。以下是几种可行的修复方案：

• 给聚焦环添加相同圆角：让聚焦环的圆角和按钮保持一致，避免偏移后角落露出空隙。修改后的代码如下：

<button type="button" class="flex items-center rounded-md text-xs text-gray-500 underline outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-4 focus:rounded-md">preview email</button>

• 匹配环偏移的背景色：给环偏移指定与按钮所在背景一致的颜色，让伪影被背景色覆盖。假设背景为白色，代码调整为：

<button type="button" class="flex items-center rounded-md text-xs text-gray-500 underline outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-4 focus:ring-offset-white">preview email</button>

• 减小环偏移量：降低focus:ring-offset-*的数值，比如改为focus:ring-offset-2，通过缩小偏移距离来缓解伪影问题。

内容的提问来源于stack exchange，提问作者Carl Wirkus