Die beste Methode zum Entfernen von CSS-Halo mit abgerundeten Ecken?

Question

Ich bekomme eine kleine abgerundete Ecke Halo Effekt, den ich gerne loswerden würde. Suchen Sie in this example nach dem Effekt im roten Kreis. Hier ist ein Zoom in der Wirkung:

Ich scheine eine Weile zu erinnern zurück Lesen eines Artikels nur auf dieses Problem. Jeder hat einen Link zu diesem Artikel? Sonst, irgendwelche guten Möglichkeiten, den Heiligenschein loszuwerden?

Es wird verursacht, weil die dl alle vier Ecken abgerundet hat. Dadurch kann der Boden der dl abgerundet werden. Die dt sitzt über der dl und hat ihre top left und top right Ecken abgerundet. Aber es gibt einen leichten Überlauf der dl Kurve hinter der dt Kurve, die den Halo verursacht.

My solution ist der Rand-Radius der dl zu erhöhen, so dass es hinter der dt Ecke versteckt ist. Aber es scheint wie ein Hack und fügt eine Menge mehr CSS hinzu. Ich frage mich, ob es eine bessere Lösung gibt. Hier ist es ohne Halo ist:

Answer 1

Wenn Sie nicht über ein 2 Pixel Diskrepanz wohlgemerkt hinzufügen könnte ...

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

Aber ich denke, Ihre Lösung ist gut, kann es sein, verbessert durch die Kurzversion des Grenzradius mit:

http://jsfiddle.net/DAjWS/

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

Der Artikel, den Sie erwähnen, hat wahrscheinlich mit der Kombination von Grenze mit Rand-Radius zu tun (es erzeugt einen Heiligenschein ähnlich dem Ihren), aber in Ihrem Fall wird es erwartet. Das Gleiche würde in einer Vektorbearbeitungs-App passieren, wenn Sie zwei Kästchen mit abgerundeten Ecken überlappten. Sie müssen nur eine elegante Möglichkeit finden, das Anti-Aliasing der unteren Box zu überdecken.

Answer 2

Ich bin gerade auf the article that I mentioned in my question gestoßen. Es wurde von html5boilerplate.com verlinkt. Im Wesentlichen wird die folgende webkit CSS loszuwerden, die Blutung (oder Halo, wie ich es genannt):

-webkit-background-clip: padding-box;