बच्चे को सीएसएस

Question

में माता-पिता की घुमावदार सीमाओं का पालन करने के लिए मजबूर करना मेरे पास एक और div के अंदर एक div है। #outer और #inner। #outer घुमावदार सीमाओं और एक सफेद पृष्ठभूमि है। #inner में कोई घुमावदार सीमाएं और हरी पृष्ठभूमि नहीं है। #inner#outer की घुमावदार सीमाओं से परे फैली हुई है। क्या इसे रोकने का कोई तरीका है?

#outer { 
 
     display: block; float: right; margin: 0; width: 200px; 
 
     background-color: white; overflow: hidden; 
 
     -moz-border-radius: 10px; 
 
     -khtml-border-radius: 10px; 
 
     -webkit-border-radius: 10px; 
 
     border-radius: 10px; 
 
    } 
 
    #inner { background-color: #209400; height: 10px; border-top: none; }

<div id="outer"> 
 
     <div id="inner"></div> 
 
     <!-- other stuff needs a white background --> 
 
     <!-- bottom corners needs a white background --> 
 
    </div> 
 

 

 

कोई फर्क नहीं पड़ता कि मैं कितना कोशिश यह अभी भी चढ़ जाता है। मैं #inner कैसे बना सकता हूं और #outer की सीमाओं को भर सकता हूं?

संपादित

निम्नलिखित हैक अब के लिए उद्देश्य की सेवा। लेकिन सवाल खड़ा है (शायद CSS3 और वेबब्रोसर लेखकों के लिए): बाल तत्व अपने माता-पिता की घुमावदार सीमाओं का पालन क्यों नहीं करते हैं और क्या उन्हें वहां मजबूर करने के लिए वैसे भी है?

हैक अब मेरी आवश्यकताओं के लिए इसे पाने के लिए हैक, आप व्यक्तिगत सीमाओं के लिए वक्र असाइन कर सकते हैं। तो मेरे उद्देश्यों के लिए, मैंने अभी भी आंतरिक तत्व के शीर्ष दो में एक वक्र असाइन किया है।

#inner { 
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; 
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; 
} 

Answer 1

: इन उपयोग

एक बॉक्स की पृष्ठभूमि है, लेकिन इसकी सीमा-छवि नहीं है, उचित वक्र पर सेट की गई है (जैसा निर्धारित है 'पृष्ठभूमि-क्लिप' द्वारा ined)। सीमा या पैडिंग एज पर क्लिप (जैसे 'ओवरफ्लो' 'दृश्यमान' के अलावा) को भी वक्र पर क्लिप करना होगा। तत्वों की प्रतिस्थापित सामग्री हमेशा सामग्री किनारे वक्र पर छंटनी की जाती है। इसके अलावा, सीमा के वक्र के बाहर क्षेत्र तत्व की ओर से ओर माउस ईवेंट स्वीकार नहीं करता है।

http://www.w3.org/TR/css3-background/#the-border-radius

इसका मतलब है कि #outer पर एक overflow: hidden काम करना चाहिए। हालांकि, यह फ़ायरफ़ॉक्स 3.6 और नीचे के लिए काम नहीं करेगा। यह फ़ायरफ़ॉक्स 4:

गोलाकार कोनों अब सामग्री और छवियों को क्लिप करता है (यदि अतिप्रवाह: दृश्यमान सेट नहीं है) में तय किया गया है।

https://developer.mozilla.org/en/CSS/-moz-border-radius

तो आप अभी भी ठीक की आवश्यकता होगी, बस करने के लिए इसे छोटा:

#outer { 
    overflow: hidden; 
} 

#inner { 
    -moz-border-radius: 10px 10px 0 0; 
} 

इसे यहाँ काम कर देखें: http://jsfiddle.net/VaTAZ/3/

Answer 2

इसके साथ क्या गलत होगा?

#outer { 
    display: block; float: right; margin: 0; width: 200px; 
    background-color: white; overflow: hidden; 
} 
#inner { background-color: #209400; height: 10px; border-top: none; } 

#outer, #inner{ 
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

Answer 3

आप स्थिति बनाने की कोशिश की है: भीतरी div के लिए रिश्तेदार ???

है जो:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
} 

Answer 4

आप तल पर तेज किनारों चाहते हैं: चश्मा के अनुसार

 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 

-moz-border-radius-topleft 
-moz-border-radius-topright