CSS3 के बॉर्डर-त्रिज्या प्रभाव को कैसे लागू करें

डेविड कार्लिन्स, डौग सहलिन द्वारा

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



  • आप एक चयनकर्ता (एक सीएसएस शैली) के लिए एक सीमा-त्रिज्या लागू नहीं कर सकते हैं जिसमें परिभाषित ऊंचाई या चौड़ाई (कम से कम एक या अन्य) नहीं है।



  • CSS3 में सीमा-त्रिज्या के लिए मूल संपत्ति सीमा-त्रिज्या है, जिसके बाद एक मान होता है। उदाहरण के लिए, सीमा-त्रिज्या:12px; जिस तत्व पर इसे लगाया जाता है, उसके चारों कोनों पर गोल कोने बनाता है। और उन कोनों की गोलाई कोनों से 12 पिक्सेल तक बढ़ा दी जाएगी।

  • आप सीमा के प्रत्येक कोने के लिए अलग त्रिज्या परिभाषित कर सकते हैं। उदाहरण के लिए:



border-top-left-radius:1px; border-top-right-radius:2px; border-bottom-right-radius:3px; border-bottom-left-radius:4px;

निम्नलिखित उदाहरण लें: एक वर्ग शैली जो सीमाओं और सीमा त्रिज्या दोनों को परिभाषित करती है। निम्नलिखित सीएसएस शैली एक बनाती है:।सीमाओंवह वर्ग जो सीमाओं और सीमा त्रिज्या दोनों को किसी भी तत्व पर लागू करता है जिस पर इसे लागू किया जाता है:

.borders { border:12px solid gray; border-top-left-radius:48px; border-top-right-radius:24px; border-bottom-right-radius:12px; border-bottom-left-radius:6px; padding: 12px; }

पिछले कोड का परिणाम, जैसा कि क्रोम ब्राउज़र में दिखाया गया है, एक परिभाषित सीमा और परिभाषित सीमा त्रिज्या गुणों के साथ वर्ग चयनकर्ता (शैली) को दर्शाता है।

छवि0.jpg



आईई और क्रोम के समकालीन संस्करणों में गोलाकार कोने (सीमा-त्रिज्या) कोड ठीक काम करता है क्योंकि उन ब्राउज़रों को इस प्रभाव के लिए उपसर्ग की आवश्यकता नहीं होती है। लेकिन मोज़िला फ़ायरफ़ॉक्स, वेबकिट ब्राउज़र जैसे सफारी (डेस्कटॉप/लैपटॉप और मोबाइल के लिए), और ओपेरा के कुछ संस्करणों में सीमा-त्रिज्या काम करने के लिए, आपको उपयुक्त उपसर्गों के साथ सीमा-त्रिज्या कोड की तीन प्रतियां बनाना होगा, जैसे:

.borders { border:12px solid gray; border-top-left-radius:48px; border-top-right-radius:24px; border-bottom-right-radius:12px; border-bottom-left-radius:6px; -moz-border-top-left-radius:48px; -moz-border-top-right-radius:24px; -moz-border-bottom-right-radius:12px; -moz-border-bottom-left-radius:6px; -webkit-border-top-left-radius:48px; -webkit-border-top-right-radius:24px; -webkit-border-bottom-right-radius:12px; -webkit-border-bottom-left-radius:6px; -o-border-top-left-radius:48px; -o-border-top-right-radius:24px; -o-border-bottom-right-radius:12px; -o-border-bottom-left-radius:6px; padding: 12px; }

केवल सीएसएस शैली परिभाषा के चार संस्करणों के साथ यह सीमा सभी प्रमुख, वर्तमान ब्राउज़रों में काम करेगी।

पुराने ब्राउज़रों में पृष्ठ देखने वाले लोगों को उस उन्नत डिज़ाइन अनुभव को छोड़ना होगा जो उन्हें वर्तमान पीढ़ी के ब्राउज़र में पृष्ठ देखने पर मिलेगा। लेकिन क्योंकि CSS3 प्रभाव वास्तविक पृष्ठ सामग्री को देखने की आवश्यकता नहीं है, यह अभी भी सुलभ है (और इस उदाहरण में, सीमा अभी भी दिखाई देती है)।