सीएसएस डिवी गोलाकार कोनों

Question

मैं निम्नलिखित करने का प्रयास कर रहा हूं ...

यह अभी मुझे मिला है .. लेकिन यह सही ढंग से प्रस्तुत नहीं कर रहा है। क्या किसी के पास कोई विचार है कि मैं इसे कैसे ठीक करूं?

सीएसएस

/* Curved Corners */ 
    .bl { 
background: url(bl.gif) 0 100% no-repeat; 
/*background-color:#EFFBEF;*/ 
width: 700px; 
margin-left: auto ; 
margin-right: auto ;} 
    .br { 
background: url(br.gif) 100% 100% no-repeat; 
} 
    .tl { 
background: url(tl.gif) 0 0 no-repeat; 
} 
    .tr { 
background: url(tr.gif) 100% 0 no-repeat; 
} 
    .clear {font-size: 1px; height: 1px} 

एचटीएमएल

<div class="bl"><div class="br"><div class="tl"><div class="tr"> 

     <div id="header"> 

    </div> 

    <div id="footer"> 

    </div> 

     </div></div></div></div> 

Answer 1

इसके बजाय मैं तुम्हें CSS3, जो अन्य तरीकों के विपरीत, बाहरी HTML या जावास्क्रिप्ट मार्कअप कि कुख्यात किसी भी गोल तत्व का कारण बनता है की आवश्यकता नहीं है का उपयोग करने का सुझाव पेज लोड पर 'फ्लैश' करने के लिए।

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px; 

यह जनरेटर भी उपयोगी है: http://borderradius.com/ और वहाँ (यदि सभी नहीं) ब्राउज़रों http://css3generator.com

सबसे के नवीनतम संस्करणों में से एक और एक border-radius: 10px; बस ठीक काम करता है है, और कारण समय के भीतर, ब्राउज़र विशिष्ट घोषणा अप्रचलित हो जाएगी।

IE6, 7 और 8 में बॉर्डर की त्रिज्या काम करे, इसके ms-border-radius js library कोशिश है, हालांकि मैं यह परीक्षण नहीं किया है (और किसी को जवाब दिया गया है कि यह काम नहीं करता।) मेरी व्यक्तिगत राय है कि अगर किसी को है अभी भी इन उपयोग कर रहा है ब्राउज़र, इंटरनेट को रोज़ाना एक अजीब और डरावनी जगह की तरह दिखना चाहिए, और इस प्रकार, वे अपने गोलाकार कोनों को याद नहीं करेंगे।

इसके अलावा: जिस विधि का आप उपयोग करने का प्रयास कर रहे हैं वह अधिक लागू था जब CSS3 व्यापक रूप से समर्थित नहीं था। यह इंटरनेट की एक अजीब अवधि के दौरान बनाया गया था जब आईई 6 की लोकप्रियता ने अनगिनत वेब डेवलपर्स को अन्यथा सरल समस्याओं के लिए अत्यधिक गैर-अर्थपूर्ण रचनात्मक समाधान खोजने के लिए प्रेरित किया। तो हमारे सभी जीवन से कुछ साल दूर करने और वेब डिज़ाइन और विकास की प्रगति को धीमा करने के लिए इंटरनेट एक्सप्लोरर का धन्यवाद।

Answer 2

सभी प्रमुख ब्राउज़रों के लिए एक शानदार सारांश, आपको बता रहा है कि कैसे प्रत्येक कोना या हर कोने पूर्णांक बनाना:

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Answer 3

वहाँ हमेशा के रूप में अच्छी तरह से है curvycorners, यह गति के लिए देशी सीएसएस का उपयोग करता है ब्राउज़र इसका समर्थन करता है या यदि यदि ब्राउज़र नहीं करता है तो जावास्क्रिप्ट पर वापस आ जाता है।

Answer 4

jQuery के साथ आसानी से किया जा सकता है गोल कोनों rounded_corner

$(document).ready(function(){ 
    $("#b1").corner(); 
}); 

आप jQuery दृष्टिकोण के साथ पार ब्राउज़र मुद्दों के बारे में चिंता करने की जरूरत नहीं है।

Answer 5

इसके बजाय बस इस कोड को उस कक्षा में रखें जहां आप गोलाकार कोनों को रखना चाहते हैं। यह निश्चित रूप से काम करेगा।

-khtml-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px;