CSS如何实现圆角线条无缝拼接 Tailwind圆角边框间隙消除问题咨询

方案1：边框透明+负边距适配（改动最小，兼容所有缩放场景） #

缩放出现双线的本质是不同比例下浏览器对1px边框的渲染精度差异，只需要把拼接处的重叠边框设为透明，再用1px负边距完美贴合即可，不需要额外修改布局结构：

<div class="grid grid-cols-3">
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  <div class="ml-[-1px]">
    <div class="h-1/2 border-b border-gray-300 border-l-transparent"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="ml-[-1px]">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="ml-[-1px]">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
</div>

这个方案仅修改2处代码，所有缩放比例下都不会出现双线，也不会存在圆角间隙。

方案2：背景绘制折线（完全无拼接问题） #

如果后续折线形状还需要调整，可以直接把中间折线用单个元素的背景实现，完全不需要拆分多个div拼接：

<div class="grid grid-cols-3">
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  <!-- 单个元素实现整段折线 -->
  <div class="bg-[length:1px_100%,100%_1px] bg-[position:left_top,left_top] bg-no-repeat bg-[linear-gradient(#d1d5db,#d1d5db),linear-gradient(#d1d5db,#d1d5db)] [mask:radial-gradient(circle_at_bottom_left,transparent_8px,black_8px)_top/100%_33.33%_no-repeat,radial-gradient(circle_at_bottom_left,transparent_8px,black_8px)_top_33.33%/100%_33.33%_no-repeat,linear-gradient(black,black)_top_66.66%/100%_33.33%_no-repeat]"></div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  <!-- 剩余列按原有逻辑编写即可 -->
</div>

这个方案省略了边框拼接逻辑，所有渲染一次性完成，不会存在任何间隙或者双线问题。

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