Cách tốt nhất để xóa quầng quầng tròn CSS?

Question

Tôi nhận được một góc tròn nhỏ halo hiệu ứng mà tôi muốn loại bỏ. Trong this example, hãy tìm hiệu ứng trong vòng tròn màu đỏ. Dưới đây là một phóng to thu nhỏ của hiệu ứng:

tôi dường như nhớ lại một thời gian trở lại đọc một bài viết về vấn đề này chỉ. Bất cứ ai cũng có một liên kết đến bài viết đó? Nếu không, có cách nào tốt để thoát khỏi quầng sáng?

Nguyên nhân là do dl có tất cả bốn góc được làm tròn. Điều này cho phép dưới cùng của dl được làm tròn. dt nằm trên dl và có các góc top left và top right được làm tròn. Nhưng có một chút tràn của đường cong dl phía sau đường cong dt, gây ra quầng sáng.

My solution là tăng bán kính đường biên của dl sao cho nó bị ẩn sau góc dt. Nhưng nó có vẻ giống như một hack và thêm một số tiền hợp lý hơn CSS. Tôi tự hỏi nếu có một giải pháp tốt hơn. Ở đây nó là không có quầng:

Answer 1

Nếu bạn không nhớ một sự khác biệt 2 điểm ảnh bạn có thể thêm ...

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

Nhưng tôi nghĩ rằng giải pháp của bạn là tốt, nó có thể được cải thiện bằng cách sử dụng phiên bản tốc ký bán kính biên giới:

http://jsfiddle.net/DAjWS/

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

Bài viết bạn đang đề cập có thể phải làm với sự kết hợp của đường viền với bán kính đường viền (nó tạo ra một quầng tương tự như của bạn), nhưng trong trường hợp của bạn nó được mong đợi. Điều tương tự sẽ xảy ra trong ứng dụng chỉnh sửa vectơ nếu bạn chồng chéo hai hộp với các góc tròn. bạn chỉ cần tìm một cách trang nhã để che giấu phần chống răng cưa của hộp phía dưới.

Answer 2

Tôi vừa mới xem qua số the article that I mentioned in my question. Nó được liên kết đến từ html5boilerplate.com. Về cơ bản, CSS webkit sau đây sẽ thoát khỏi sự chảy máu (hoặc quầng như tôi gọi nó):

-webkit-background-clip: padding-box;