css - 去除 CSS 圆 Angular 光环的最佳方法？

Question

我得到了一个小圆 Angular 光晕效果，我想去掉它。在 this example ，寻找红圈中的效果。这是效果的放大图:

我似乎记得不久前读过一篇关于这个问题的文章。有人有那篇文章的链接吗？不然有什么好的办法去掉光环吗？

这是因为 dl 的四个 Angular 都是圆的。这允许将 dl 的底部倒圆 Angular 。 dt 位于 dl 之上，其左上角 和右上角 圆 Angular 。但是dt曲线后面的dl曲线有轻微的溢出，造成了光晕。

My solution就是增加dl的border-radius，让它隐藏在dt Angular 后面。但这似乎是一种 hack，并且添加了相当多的 CSS。我想知道是否有更好的解决方案。这是没有光环的:

Answer 1

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

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

但我认为你的解决方案很好，可以通过使用 border radius 的简写版本来改进它:

http://jsfiddle.net/DAjWS/

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

您提到的文章可能与 border 与 border-radius 的组合有关(它会产生类似于您的光环)，但在您的情况下，这是预期的。如果您重叠两个带圆 Angular 的框，矢量编辑应用程序中也会发生同样的事情。你只需要找到一种优雅的方式来覆盖底部框的抗锯齿。