CSS border-radius

CSS में सबसे छोटा ब्लॉब: एक गुण पर आठ प्रतिशत, और कहीं कोई SVG नहीं। यह SVG ब्लॉब से सचमुच अलग आकृति है, और इसे दूसरे प्रारूप में वही ब्लॉब कहने के बजाय अपनी अलग चीज़ के रूप में दिया जाता है।

.blob {
  width: 320px;
  height: 320px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

जानने लायक़ बातें

• आपके पास पहले से मौजूद किसी एलिमेंट पर एक गुण — मार्कअप में चिपकाने को कुछ नहीं।
• सिर्फ़ चार कोने, इसलिए यह छह उभारों वाला ब्लॉब नहीं बना सकता और बनाने का दिखावा भी नहीं करता।
• सहजता से एनिमेट और ट्रांज़िशन करता है, जो SVG पथ अतिरिक्त मेहनत के बिना नहीं करता।
• मान ब्राउज़र की अपनी मापन सीमा के भीतर बनते हैं, इसलिए जो आप देखते हैं वही बनता है।

ब्राउज़र समर्थन

सार्वभौमिक। स्लैश वाला आठ-मान वाक्य-विन्यास इस गुण के आने के समय से ही समर्थित है। सिर्फ़ ब्लॉब — वेव का चार-कोने वाला कोई समकक्ष है ही नहीं, इसीलिए वेव जनरेटर पर यह प्रारूप चुपचाप कुछ ग़लत बनाने के बजाय निष्क्रिय रहता है।

सभी प्रीसेट में आकार

हर वह प्रीसेट जिसे यह प्रारूप व्यक्त कर सकता है, ठीक वैसे मापा गया जैसे जनरेटर उसे देता है। सबसे छोटा षट्भुज है, 94 बाइट पर; सबसे बड़ा चमक है, 110 बाइट पर। फ़र्क़ बिंदुओं की संख्या से आता है — हर अतिरिक्त बिंदु निर्देशांकों का एक पूरा घन खंड जोड़ देता है।

और विस्तार से

CSS विनिर्देश में एक नियम है जो इस तरह के लगभग हर जनरेटर को पकड़ लेता है। अगर किसी किनारे पर मिलने वाली दो त्रिज्याएँ मिलकर उस किनारे की लंबाई से ज़्यादा हो जाएँ, तो ब्राउज़र सबसे ख़राब किनारे से एक अकेला मापन गुणांक निकालता है और **हर** त्रिज्या को उससे गुणा कर देता है। एक ख़राब जोड़ा सिर्फ़ एक कोना चपटा नहीं करता — वह पूरी आकृति की गोलाई सिकोड़ देता है, इसलिए ब्राउज़र पूर्वावलोकन से साफ़ अलग कुछ बनाता है। यहाँ जोड़े इस तरह बनते हैं कि हर जोड़ा अधिक से अधिक 100% हो, जिससे वह गुणांक क़िस्मत से नहीं, रचना से ही ठीक 1 रहता है।

सवाल

इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।