React+Tailwind数量输入框边框叠加问题求解决方案

直接用子元素边框拼接的方式替代父容器+子元素双边框的方案，完美解决重叠变粗和像素缺失问题：

<div class="p-8">
  <div class="flex w-fit items-center">
    <!-- 左侧按钮：仅保留上、下、右边框，左侧圆角 -->
    <button type="button" class="h-10 w-10 rounded-l border-y border-r border-neutral-300 bg-transparent focus:outline-none">-</button>

    <!-- 输入框：仅保留上、下边框，作为中间衔接 -->
    <input id="{id}" type="number" value="{count}" class="arrow-hide h-10 w-16 border-y border-neutral-300 text-center text-base font-semibold focus:outline-none" />

    <!-- 右侧按钮：仅保留上、下、左边框，右侧圆角 -->
    <button type="button" class="h-10 w-10 rounded-r border-y border-l border-neutral-300 bg-transparent focus:outline-none">+</button>
  </div>
</div>

核心思路： #

• 去掉父容器的ring-1边框，让三个子元素的边框拼接成完整外框，从根源避免边框重叠
• 每个子元素只保留需要的边框：左按钮留右/上/下边框，输入框留上/下边框，右按钮留左/上/下边框
• 给左右按钮分别设置单侧圆角（rounded-l/rounded-r），保证整体的圆角效果和原需求一致
• 所有元素使用相同的边框宽度和颜色，确保视觉完全统一

这种方法不需要处理负margin或者渲染兼容问题，所有边框原生衔接，不会出现像素缺失的情况。

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