如何修复圆角元素间的难看间隙问题？

这种因为浏览器亚像素渲染导致的细微间隙真的很磨人，尤其是缩放后又消失的情况，一看就是典型的像素精度计算问题——当元素按百分比宽度拆分时，浏览器可能会算出带小数的像素值，渲染圆角时就会出现肉眼可见的缝隙。结合你的代码，我给你几个靠谱的解决方案：

方案1：用外层容器的overflow: hidden裁切缝隙 #

这是最稳妥的根治方法，利用外层容器的裁切特性，把内部元素可能出现的错位部分直接隐藏掉，还能简化你的圆角设置：

修改你外层的row元素，添加overflow: hidden并统一设置32px圆角，同时可以去掉内部元素的自定义圆角，让外层容器统一控制整体圆角：

<div class="row justify-content-center border m-0" style="border-radius: 32px; overflow: hidden;">
  <div class="col-10 p-0">
    <input id="search" type="text" class="form-control search-input border-0 bg-transparent" placeholder="Search...">
  </div>
  <div class="col-1 p-0">
    <button type="button" class="btn btn-secondary w-100 h-100 border-0">
      <img src="search.svg" alt="search button" width="20" height="25">
    </button>
  </div>
  <div class="col-1 p-0">
    <div class="dropdown w-100 h-100">
      <button type="button" class="btn btn-secondary w-100 h-100 border-0 dropdown-toggle" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="filter-icon.svg" alt="filter" width="20" height="20">
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdown">
        <li><a class="dropdown-item" href="#">filtering coming soon!</a></li>
      </ul>
    </div>
  </div>
</div>

这样整个容器的圆角由外层统一控制，内部元素填满整个空间，完全不需要拼接圆角，从根源上避免了缝隙问题。

方案2：触发GPU加速解决渲染精度问题 #

如果不想改动现有圆角结构，可以给外层容器添加CSS属性触发硬件加速，强制浏览器用GPU计算渲染，很多亚像素间隙问题都能这样解决：

<div class="row justify-content-center border rounded-5 m-0" style="transform: translateZ(0); backface-visibility: hidden;">

transform: translateZ(0)会让浏览器把元素放到GPU层渲染，提升计算精度的同时，能自动修正这类细微的渲染错位。

方案3：微调元素位置（应急hack） #

如果上面的方法都不生效，可以尝试给右侧的filter按钮加一点点负边距，手动补上缝隙：

<button type="button" class="btn btn-secondary w-100 h-100 border-0 dropdown-toggle" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false" style="border-radius: 0px 32px 32px 0px; margin-left: -1px;">

不过这个方法比较hack，依赖具体布局，优先推荐前两种方案。

最后补充下为什么缩放后缝隙会消失：当你缩放页面时，浏览器会重新计算所有元素的像素尺寸，原来的小数像素会被合并成整数，错位的部分就被覆盖了，所以缝隙就看不到啦。

内容来源于stack exchange