CSS3 सीमा-त्रिज्या क्लिपिंग मुद्दे

Question

मेरे पास सीमा-त्रिज्या के साथ कुछ मूल्य है (चलो 10px कहें), और एक घोंसला वाला div जो उसके माता-पिता की पूर्ण चौड़ाई और ऊंचाई है।

<!-- ... --> 
<style type="text/css"> 
div.parent { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 10px; 
    background: #0000ff; 
    overflow: hidden; 
} 
div.inner { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ff0000; 
} 
</style> 
<!-- ... --> 
<div class="parent"> 
    <div class="inner"></div> 
</div> 
<!-- ... --> 

मैंने देखा है कि माता-पिता गोलाकार कोनों के आसपास बच्चे क्लिप नहीं है, अतिप्रवाह के बावजूद छिपा करने के लिए स्थापित किया जा रहा। ,

How do I prevent an image from overflowing a rounded corner box with CSS3?

हालांकि CSS3 के पृष्ठभूमि और सीमाओं के लिए काम मसौदा को खोदकर निकाल पर ...

http://www.w3.org/TR/css3-background/#corner-clipping

: एक अन्य stackoverflow धागा इंगित करता है कि इस व्यवहार "डिजाइन द्वारा" है

... मैं मदद नहीं कर सका लेकिन नीचे दिए गए विवरण को नोटिस कर सकता हूं "कोने कतरन" अनुभाग:

अन्य प्रभाव सीमा या गद्दी किनारे करने के लिए कि क्लिप भी वक्र के लिए क्लिप चाहिए (जैसे 'अतिप्रवाह' 'दृश्य' के अलावा अन्य के रूप में)। प्रतिस्थापित तत्वों की सामग्री हमेशा सामग्री बढ़त वक्र

तो मैं क्या याद आ रही है करने के लिए छंटनी की है? क्या सामग्री कोनों में फिसल जाना चाहिए? क्या मैं पुरानी जानकारी देख रहा हूं? क्या मैं इसे गलत कर रहा हूँ?

Answer 1

यह डिज़ाइन द्वारा नहीं है, इसके बारे में outstanding defect in Firefox है। किसी भी वेबकिट ब्राउज़र में ठीक काम करना चाहिए। फ़ायरफ़ॉक्स में आपको या तो निहित तत्व में सीमा त्रिज्या जोड़ना होगा, या use some sort of hack।

Answer 2

यदि आप दोनों तत्वों पर position: relative; हटाते हैं तो बाह्य तत्व गोलाकार कोनों के चारों ओर बच्चे को क्लिप करता है। यकीन नहीं क्यों, और अगर यह एक बग है।

Answer 3

मैं यहाँ एक जवाब की तलाश में आया था, क्योंकि मैं क्रोम 18. में

मैं इसके बारे में अंदर दो तत्वों के साथ एक गोल बॉक्स के लिए कोशिश कर रहा था एक ऐसी ही समस्या थी - बिल्कुल तैनात सूचकांक संख्या के साथ - शीर्षक और इंडेक्स नंबर बॉक्स के निचले बाएं कोने पर।

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

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

लेकिन अगर मैं सापेक्ष स्थिति चले गए एक माता पिता तत्व सब कुछ अच्छा लग रहा था:

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Answer 4

बस के बाद से मैं एक ऐसी ही समस्या के साथ इस पाया इस एक पर झंकार करना चाहता था।

स्क्रॉल करने के लिए अपने ओवरफ़्लो सेट के साथ एक div में, सीमा-त्रिज्या तब तक स्क्रॉल करते समय सामग्री को क्लिप नहीं करता जब तक कि सामग्री पूर्ण शीर्ष या नीचे तक स्क्रॉल नहीं हो जाती। फिर भी, क्लिपिंग केवल कभी-कभी फिर से दिखाई देती है अगर मैंने दस्तावेज़ को पूर्ण शीर्ष या नीचे तक स्क्रॉल किया।

एक लार्क पर मैंने तत्व के लिए एक पारदर्शी सीमा जोड़ा और यह कोनों पर क्लिपिंग को लागू करने लग रहा था। चूंकि मेरे पास तत्व के चारों ओर पहले से ही कुछ जगह थी, इसलिए मैंने इसे आधे में काट दिया और बाकी को सीमा मोटाई पर लगा दिया। आदर्श नहीं है, लेकिन मैं परिणाम के साथ समाप्त हुआ।

मैक पर क्रोम, सफारी और फ़ायरफ़ॉक्स में परीक्षण किया गया।