सीएसएस में माता-पिता की घुमावदार सीमाओं का पालन करने के लिए बच्चे को मजबूर करना

Question

मेरा एक और तलाक है। #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;
}

Comments

क्या आपने आंतरिक सीमा तक ठीक उसी सीमा त्रिज्या को स्थापित करने की कोशिश की है?

— डैनियल ओ'हारा

लेकिन मैं चाहता हूं कि आंतरिक तत्व की सीमा त्रिज्या तल पर सीधी हो। क्या केवल एक निश्चित कोने के लिए एक सीमा त्रिज्या सेट करना संभव है?

— डैनियल बिंगहम

पक्का। तुम भी उन्हें पसंद असाइन कर सकते हैं border-radius: TL TR BL BR।

— डैनियल ओ'हारा

मैंने इसे "माता-पिता के आदेशों का पालन करने के लिए बच्चे को मजबूर करना" के रूप में पढ़ा। :)

— बेनर मैककार्थी

सफारी के अपवाद के साथ, -moz-border-radiusऔर border-radiusचार मूल्यों के साथ एक आशुलिपि के रूप में इस्तेमाल किया जा सकता है 10px 10px 0 0:। सफारी के लिए हालांकि आपको उन्हें व्यक्तिगत रूप से सेट करने की आवश्यकता है।

— यी जियांग

Answer 1

चश्मा के अनुसार:

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

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

इसका मतलब है कि एक overflow: hiddenपर #outerकाम करना चाहिए। हालाँकि, यह फ़ायरफ़ॉक्स 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/

Comments

बिंगो, मैं फ़ायरफ़ॉक्स 3.6 के साथ परीक्षण कर रहा था। तो यह यह बताते हैं।

— डैनियल बिंगहैम

इस खेल में देर से आने वाला कोई भी व्यक्ति, overflow: hidden;एफएफ के वर्तमान संस्करणों पर काम कर रहा है। सुनिश्चित करें कि आप अपनी आवश्यकताओं की आवश्यकता के अनुसार वापस परीक्षण करें।

— BillyNair

बस ध्यान दें कि overflow hidden

— फिडेल

क्या होगा अगर हम नहीं चाहते कि अतिप्रवाह सामग्री छिपाई जाए? एक छिपा हुआ अतिप्रवाह टूलटिप पॉपअप और विंडो मेनू जैसी चीजों को काट देगा जो अंदर दिखाई देते हैं।

— मॅई

बस अतिप्रवाह जोड़ें: छिपा हुआ; और बाहरी त्रिज्या के लिए सीमा-त्रिज्या

— नादेर

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; 
}

Comments

मैं चाहता हूं कि नीचे की तरफ तेज मकई हो। यह दो आंतरिक विभाजनों को ले जाएगा, एक ने दूसरे को ओवरलैप करने के लिए एक नकारात्मक मार्जिन दिया।

— डैनियल बिंगहम

हम्म ... आप अलग-अलग कोनों को सेट कर सकते हैं। इसलिए मैंने सिर्फ शीर्ष दो सेट किए।

— डैनियल बिंगहम

Answer 3

यदि आप तल पर तेज किनारों चाहते हैं: इन का उपयोग करें:

बॉर्डर-टॉप-लेफ्ट-रेडियस: 10 पीएक्स;
बॉर्डर-टॉप-राइट-रेडियस: 10 पीएक्स; 

-moz-बॉर्डर-त्रिज्या-topleft
-moz-बॉर्डर-त्रिज्या-Topright

Answer 4

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

अर्थात्:

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