सीएसएस गोलाकार कोने हेलो को हटाने का सबसे अच्छा तरीका?

Question

मुझे एक छोटे गोलाकार कोने हेलो प्रभाव मिल रहा है जिससे मैं छुटकारा पाना चाहता हूं। this example में, लाल वृत्त में प्रभाव की तलाश करें। यहाँ प्रभाव का एक ज़ूम है:

मैं वापस सिर्फ इस समस्या पर एक लेख पढ़ रहा थोड़ी देर याद करने लगते हैं। किसी के पास उस लेख का एक लिंक है? अन्यथा, हेलो से छुटकारा पाने के लिए कोई अच्छा तरीका?

ऐसा इसलिए हो रहा है क्योंकि dl में चार चार कोनों गोलाकार हैं। यह गोलाकार होने के लिए dl के नीचे की अनुमति देता है। dtdl पर बैठता है और इसके top left और top right कोनों गोलाकार है। लेकिन हेलो के कारण dt वक्र के पीछे dl वक्र का मामूली ओवरफ़्लो है।

My solutiondl की सीमा-त्रिज्या को बढ़ाने के लिए है ताकि यह dt कोने के पीछे छिपा हुआ हो। लेकिन यह एक हैक की तरह लगता है और एक उचित राशि और सीएसएस जोड़ता है। मैं सोच रहा हूं कि कोई बेहतर समाधान है या नहीं। यहाँ यह प्रभामंडल के बिना है:

Answer 1

आप आप जोड़ सकते एक 2 पिक्सेल विसंगति कोई आपत्ति नहीं है ...

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

लेकिन मुझे लगता है अपने समाधान अच्छा है, यह हो सकता है

http://jsfiddle.net/DAjWS/

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

: बॉर्डर की त्रिज्या की आशुलिपि संस्करण का उपयोग करके सुधार

जिस आलेख का आप उल्लेख कर रहे हैं वह सीमा-त्रिज्या के साथ सीमा के संयोजन के साथ करना है (यह आपके जैसा हेलो उत्पन्न करता है), लेकिन आपके मामले में इसकी अपेक्षा की जाती है। यदि आप गोलाकार कोनों के साथ दो बक्से ओवरलैप करते हैं तो वेक्टर संपादन एप में भी यही बात होगी। आपको बस नीचे के बॉक्स के एंटी-एलाइजिंग को कवर करने का एक शानदार तरीका ढूंढना होगा।

Answer 2

मैं अभी the article that I mentioned in my question पर आया हूं। यह html5boilerplate.com से जुड़ा हुआ था। अनिवार्य रूप से, निम्नलिखित वेबकिट सीएसएस ब्लीड से छुटकारा (या प्रभामंडल के रूप में मैं यह कहा जाता है) मिल जाएगा:

-webkit-background-clip: padding-box;