去除CSS圆角光环的最佳方法？

我得到了一个很小的圆角光晕效果，我想消除它。在中，在红色圆圈中查找效果。下面是效果的放大：

我好像记得有段时间以前读过一篇关于这个问题的文章。有人有那篇文章的链接吗？否则，有没有摆脱光环的好方法

这是因为

dl

的四个角都是圆角。这允许将

dl

的底部四舍五入。

dt

位于

dl

上方，其

左上角

和

右上角

四舍五入。但

dl

曲线在

dt

曲线后面有轻微溢出，导致光晕

是增加

dl

的边界半径，使其隐藏在

dt

角的后面。但它似乎是一个黑客，并增加了相当多的CSS。我想知道是否有更好的解决办法。这里没有光环：

---

如果您不介意2像素的差异，您可以添加

div.content dt.top {
  position: relative;
  top: -2px;
}

但我认为您的解决方案很好，可以通过使用border radius的速记版本进行改进：

您提到的这篇文章可能与边界与边界半径的组合有关（它会产生类似于您的光环），但在您的案例中，这是意料之中的。同样的事情也会发生在矢量编辑应用程序中，如果你用圆角重叠两个框。您只需找到一种优雅的方式来覆盖底部框的抗锯齿。

我刚刚遇到。它与来自的链接。基本上，以下webkit CSS将消除出血（或我称之为光环）：

---

我不得不用放大镜看你在说什么about@qwertymk-对不起。我有点完美主义！我只是添加了一些图片来更好地说明。谢谢你的帮助。我会同意我现在所做的，但我肯定会用你的建议来简化边界半径。这将大大减少CSS。找到了文章！链接是在回答我张贴。好发现！但是，这仍然不能解决您原来的问题，因为它修复了一个具有边框+边框半径的div，而不是两个相互重叠的圆div。哦，是吗？很高兴知道。实际上，我还没有测试它，因为我们讨论的解决方案运行良好。

border-radius: [topleft] [topright] [bottomright] [bottomleft]

-webkit-background-clip: padding-box;