删除CSS圆角晕的最佳方法是什么？

Question

我有一个小圆角晕效果，我想摆脱它。在this example中，在红色圆圈中查找效果。这是效果的放大：

我似乎回想起一篇关于这个问题的文章。有人有这篇文章的链接吗？否则，任何摆脱光环的好方法？

这是因为dl所有四个角都是圆角的。这允许dl的底部被舍入。 dt位于dl上方，top left和top right角为圆角。但是dl曲线后面的dt曲线略微溢出，导致光环。

My solution是增加dl的边界半径，使其隐藏在dt角落后面。但它似乎是一个黑客，并增加了相当多的CSS。我想知道是否有更好的解决方案。这里没有光环：

Answer 1

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

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

但我认为您的解决方案很好，可以通过使用边框半径的简写版本来改进：

http://jsfiddle.net/DAjWS/

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

你提到的文章可能与border-border的边界组合有关（它产生类似于你的光环），但在你的情况下它是预期的。如果你重叠两个圆角的方框，矢量编辑应用程序也会发生同样的事情。你必须找到一种优雅的方法来覆盖底盒的抗锯齿。

Answer 2

我刚遇到the article that I mentioned in my question。它与html5boilerplate.com相关联。基本上，以下webkit CSS将摆脱出血（或称为晕）：

-webkit-background-clip: padding-box;