2008-12-12 14 views
10

के लिए घुमावदार कोने सीमा कोने में किसी भी छवि का उपयोग करके, घुमावदार कोने सीमा के साथ एक div बनाने की आवश्यकता है। क्या यह संभव है?एक div

मैं कोने में घुमावदार छवियों को सम्मिलित नहीं करना चाहता, कृपया इसके बारे में मेरी सहायता करें।

+1

चेक [इस पोस्ट] (http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) - एक बहुत सरल क्रॉस ब्राउज़र CSS3 कोड। – Shahar

उत्तर

7

http://www.curvycorners.net/

इस पुस्तकालय आज़माएं, यह मेरे लिए चमत्कार किया! यह एक परीक्षण क्रॉस ब्राउज़र समाधान है।

+2

वह साइट [डाउन] लगता है (http://www.downforeveryoneorjustme.com/http://www.curvycorners.net)। [अंतिम परियोजना अद्यतन] (http://code.google.com/p/curvycorners/source/list) मार्च, 2011 को था। परियोजना [Google Code] पर होस्ट की जाती है (http://code.google.com/p/curvycorners /)। –

6

आप आधुनिक ब्राउज़रों में गोलाकार कोनों प्राप्त करने के लिए सीएसएस का उपयोग कर सकते हैं ...

border-radius: 10px; 

Handy Generator

यह progressive enhancement के रूप में जाना जाता है। आईएमओ, यह मार्जिन और सीमाओं के साथ छवियों और सीएसएस चाल से बेहतर है। जब तक आप बिल्कुल गोलाकार कोनों में नहीं होना चाहिए।

9

आप वेबकिट और मोज़िला ब्राउज़र पर भरोसा करना चाहते हैं, तो आपको निम्न सीएसएस आदेशों का उपयोग कर सकते हैं:

.radius { 
-moz-border-radius: 6px; 
-webkit-border-radius:6px; 
border-radius: 6px; 
    } 

विवरण here देखी जा सकती है। सीएसएस 2 कल्पना बॉर्डर-त्रिज्या पर

जानकारी here

पाया जा सकता है ये दुर्भाग्य यानी के लिए काम नहीं करते।

आप केवल niftycube का उपयोग कर आईई के लिए जावास्क्रिप्ट रूट जा सकते हैं जिसमें समस्याओं के बिना कॉलम ऊंचाई स्तर का समर्थन करने का अतिरिक्त लाभ है।

0

यहां एक लिखा है कि यदि आप इसे पसंद करते हैं तो इसका उपयोग करने के लिए आपका स्वागत है। यह पृष्ठभूमि रंग के साथ किसी भी आयाम के गोलाकार कोने बॉक्स को प्रस्तुत करता है लेकिन पूरे बॉक्स के चारों ओर सीमा नहीं है। यह सफेद पृष्ठ पृष्ठभूमि के लिए है, लेकिन इसे सी 1, सी 2 & सी 3 शैलियों में सीमा रंग संपादित करके बदला जा सकता है।

.rounded {background-color:#f1f0f1} 
.rounded .inner {padding:8px 10px 8px 12px} 
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px} 
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px} 
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px} 


    <div class="rounded" style="width:200px;height:100px"> 
    <div class="c1"></div><div class="c2"></div><div class="c3"></div> 
     <div class="inner"> 
     -- Content Here -- 
     </div> 
     <div class="c3"></div><div class="c2"></div><div class="c1"></div> 
    </div> 
-2

मैं गोलाकार कोनों को संभालने के लिए एक jQuery प्लगइन का उपयोग करता हूं। JQuery साइट पर उपलब्ध गोलाकार कोने प्लगइन्स की सूची यहां दी गई है: http://plugins.jquery.com/taxonomy/term/189