如何消除设置了border-radius属性的两个div之间的间隙

嵌套的父子两个div均设置了border-radius: 25px样式，二者圆角衔接位置存在肉眼可见的细间隙，Chrome开发者工具中效果如下：

这个间隙是浏览器渲染圆角时的抗锯齿机制导致的，和margin、padding属性无关，选以下任意一种方案即可消除：

• 最优方案：给外层父容器添加overflow: hidden属性。不需要修改现有圆角配置，父容器会直接裁切子元素溢出的抗锯齿透明边缘，从根源消除间隙，适配所有主流浏览器，不会出现多端表现不一致的问题。
• 备选方案1：移除子元素的border-radius属性，子元素的直角会被父容器的圆角+overflow: hidden属性自动裁切为和父元素一致的圆角，完全不会出现渲染缝隙。
• 备选方案2：如果业务场景不能给父元素加overflow: hidden，可以把内层子div的圆角值调小1-2px，例如设置为border-radius: 23px，或者给子元素添加transform: scale(1.01)做极轻微的放大，让子元素边缘刚好覆盖渲染出的缝隙即可。

避坑提示：不要通过给子元素加负margin的方式补缝隙，不同浏览器、不同页面缩放比例下抗锯齿生成的缝隙宽度不固定，负margin方案很容易在部分场景下出现子元素溢出父容器边框的穿帮问题。

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