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

Question

我得到了一个小圆角光环效果,我想摆脱它.在此示例中,查找红色圆圈中的效果.这是效果的放大:

我似乎记得有一段时间回来读一篇关于这个问题的文章.有人有这篇文章的链接吗？否则,任何摆脱光环的好方法？

这是因为dl所有四个角都是圆形的.这允许dl圆形的底部.该dt坐在过dl,并拥有top left和top right边角圆润.但是dl曲线后面的dt曲线略微溢出,导致光环.

我的解决方案是增加边界半径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-radius 的组合有关（它产生与您类似的光环），但在您的情况下，这是预期的。如果将两个圆角框重叠，在矢量编辑应用程序中也会发生同样的情况。您只需要找到一种优雅的方式来覆盖底部框的抗锯齿功能即可。