Лучший способ удалить ореол с закругленными углами 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]

Статья, которую вы упоминаете, вероятно, имеет отношение к комбинации границы с границей радиуса (она производит ореол, похожий на ваш), но в вашем случае это ожидается. То же самое произойдет в приложении для редактирования векторов, если вы наложите два прямоугольника на закругленные углы. вам просто нужно найти элегантный способ скрыть сглаживание нижней коробки.

Answer 2

Я только что наткнулся на статью, которую я упомянул в своем вопросе . Он был связан с html5boilerplate.com . По сути, следующий CSS веб-набора избавит от кровотечения (или ореола, как я его назвал):

-webkit-background-clip: padding-box;