Il modo migliore per rimuovere l'alone di angoli arrotondati del CSS?

Question

Sto ottenendo un piccolo angolo arrotondato effetto alone che mi piacerebbe eliminare. In this example, cerca l'effetto nel cerchio rosso. Ecco uno zoom in dell'effetto:

Mi sembra di ricordare un po 'indietro la lettura di un articolo proprio su questo problema. Qualcuno ha un link a quell'articolo? Altrimenti, qualche buon modo per liberarsi dell'alone?

È causato perché il dl ha tutti e quattro gli angoli arrotondati. Ciò consente di arrotondare la parte inferiore di dl. Lo dt si trova sopra lo dl e ha gli angoli top left e top right arrotondati. Ma c'è un leggero overflow della curva dl dietro la curva dt, causando l'alone.

My solution consente di aumentare il raggio di confine dello dl in modo che sia nascosto dietro l'angolo dt. Ma sembra un trucco e aggiunge una buona quantità di CSS. Mi chiedo se c'è una soluzione migliore. Qui è senza l'alone: ​​

Answer 1

Se non ti dispiace una discrepanza 2 pixel si potrebbe aggiungere ...

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

Ma penso che la soluzione è buona, può essere migliorata usando la versione abbreviata di arrotondamento:

http://jsfiddle.net/DAjWS/

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

L'articolo che stai citando probabilmente ha a che fare con la combinazione del bordo con il raggio del bordo (produce un alone simile al tuo), ma nel tuo caso è previsto. La stessa cosa accadrebbe in un'app di modifica vettoriale se si sovrapponevano due caselle con gli angoli arrotondati. devi solo trovare un modo elegante per coprire l'anti-aliasing della scatola in basso.

Answer 2

Mi sono appena imbattuto nello the article that I mentioned in my question. Era collegato a da html5boilerplate.com. In sostanza, il seguente CSS webkit sarà sbarazzarsi del spurgo (o alone, come ho chiamato):

-webkit-background-clip: padding-box;