为什么即使将特定的角设置为0px，Chrome仍总是添加1px的边框半径？

Question

当您将border-radius应用于Google Chrome浏览器中的元素时，我注意到所有角都会得到一个细微的1px圆角，即使将特定角设置为0px也是如此。 / p>

请考虑以下内容：

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

前两个框是此实验的控件；正如我们所期望的那样，第一个框的边角很好，第二个框的边角有1px的微妙。到目前为止一切顺利。

奇怪的是，第3个框的边界半径值为0 0 5px 5px，但顶部也有1px圆角。如果您在开发工具中查看计算值，则border-top-left-radius和border-top-right-radius都正确设置为0px，但是它们呈现为好像设置为1px。

您需要一只鹰眼才能看到它，但肯定在那里。这是我使用Photoshop放大后的Chrome浏览器页面的屏幕截图：

请注意，框＃3的顶角比边框的其余部分更柔和/更白。即使将其设置为0px，它们也与框＃2的1px圆角相同。

Chrome为什么要这样做，如何防止呢？

为便于记录，我使用Windows 10，并且使用的是最新版本的Chrome（v74.0.3729.108）。该问题仅存在于Chrome中，而不存在于Firefox或Edge中。我不确定这是WebKit还是Chrome / PC特有的问题。

Answer 1

我想出了一个解决方案，用于像我这样的像素完美主义者，他们被这个Chrome错误困扰：

如果您尚未在元素上使用:before进行其他操作，则可以使用该元素覆盖顶部边框为1px的元素，该边框颜色与基本元素的边框颜色相同，它似乎具有尖锐的角落渲染。 hacky，但是行得通。

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

.box4 { border-radius: 0 0 5px 5px; position: relative; }
.box4:before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px; border-top: 1px solid #888; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>

第4个框现在呈现在顶部，带有尖角。

当然，如果您的非圆角彼此不在同一侧（例如，它们是凯蒂角），则解决方案会比较麻烦，但是结合使用{{1 }}和:before。