सीमा-त्रिज्या प्रतिशत (%) और पिक्सेल (px) या एम

Question

यदि मैं बॉर्डर-त्रिज्या के लिए पिक्सेल या एम मान का उपयोग करता हूं , तो धार त्रिज्या हमेशा एक गोलाकार चाप या ए है गोली का आकार होता है, भले ही मूल्य तत्व के सबसे बड़े पक्ष से अधिक हो।

जब मैं प्रतिशत का उपयोग करता हूं , तो किनारे का त्रिज्या दीर्घवृत्तीय होता है और तत्व के प्रत्येक पक्ष के मध्य में शुरू होता है जिसके परिणामस्वरूप अंडाकार या दीर्घवृत्त आकार होता है :

सीमा-त्रिज्या के लिए पिक्सेल मान:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

सीमा-त्रिज्या के लिए प्रतिशत मान:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

प्रतिशत में सीमा त्रिज्या उसी तरह कार्य नहीं करती है जैसे सीमा-त्रिज्या पिक्सेल या एम मान के साथ सेट की जाती है?

Answer 1

सीमा-त्रिज्या:

सबसे पहले, आपको यह समझने की आवश्यकता है कि सीमा-त्रिज्या संपत्ति 2 मान लेती है। ये मान कोने के आकार को परिभाषित करने वाले एक चौथाई दीर्घवृत्त के एक्स / वाई अक्ष पर त्रिज्या हैं।
यदि केवल एक मान सेट है तो दूसरा मान पहले वाले के बराबर है। के border-radius: xबराबर है border-radius:x/x;।

मूल्यों का प्रतिशत

W3C स्पेक्स का संदर्भ: सीएसएस बैकग्राउंड्स एंड बॉर्डर्स मॉड्यूल लेवल 3 बॉर्डर-रेडियस प्रॉपर्टी यह वही है जिसे हम संबंधित प्रतिशत मान पढ़ सकते हैं:

प्रतिशत: बॉर्डर बॉक्स के संबंधित आयाम का संदर्भ लें।

तो border-radius:50%;इस तरह दीर्घवृत्त की मूली को परिभाषित करता है:

• एक्स अक्ष पर त्रिज्या कंटेनर की चौड़ाई का 50% है
• वाई अक्ष पर रेडीआई कंटेनर की ऊंचाई का 50% है

पिक्सेल और अन्य इकाइयाँ

सीमा त्रिज्या (उन्हें, व्यूपोर्ट संबंधित इकाइयों, सेमी ...) के प्रतिशत के अलावा एक मान का उपयोग करने पर हमेशा एक ही X / Y त्रिज्या के साथ एक दीर्घवृत्त में परिणाम होगा। दूसरे शब्दों में, एक चक्र ।

जब आप border-radius:999px;वृत्त की त्रिज्या सेट करते हैं, तो उसे 999px होना चाहिए। लेकिन एक और नियम लागू किया जाता है जब कर्व्स ओवरलैप को सर्कल के त्रिज्या को कम करके आधा छोटा आकार देते हैं। तो आपके उदाहरण में यह तत्व की आधी ऊंचाई के बराबर है: 50px।

---

इस उदाहरण के लिए (एक निश्चित आकार के तत्व के साथ) आप px और प्रतिशत दोनों के साथ एक ही परिणाम प्राप्त कर सकते हैं। जैसा कि तत्व है 230px x 100px, दोनों पक्षों के (50%) के border-radius: 50%;बराबर है border-radius:115px/50px;:

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Comments

बहुत बढ़िया जवाब। यह एक दया है कि प्रतिशत त्रिज्या मानों की गणना चौड़ाई और ऊंचाई के लिए अलग-अलग की जाती है। इसका अर्थ है कि मुझे ऑब्जेक्ट के पहलू अनुपात को जानने के बिना, ऑब्जेक्ट के आकार के साथ उस पैमाने के परिपत्र कोनों को प्राप्त नहीं किया जा सकता है। क्या यह अच्छा नहीं होगा यदि प्रतिशत वस्तुओं के बड़े आयामों पर लागू हो?

— क्रिस डेनिस

@ क्रिसडेन यह सच नहीं है। जैसे ओपी ने कहा, आप बस उपयोग कर सकते हैं border-radius: 999px;। इस तरह से आप अपने परिपत्र कोनों को प्राप्त करते हैं और सुनिश्चित करते हैं कि वे आपके तत्व के साथ बड़े पैमाने पर हैं

— Gust van de Wal

लेकिन मैं बॉक्स के लिए अर्ध-परिपत्र छोर नहीं चाहता हूं। मैं x-त्रिज्या को निर्दिष्ट करने में सक्षम होना चाहूंगा, जैसे कि बॉक्स की चौड़ाई का 10% और y- त्रिज्या x- त्रिज्या के बराबर।

— क्रिस डेनिस

अरे आपने इस तरह से अन्य स्व उत्तर पोस्ट किया है? मैं उन लोगों को पढ़ने की सराहना करता हूं।

— Ced

लेकिन क्या वास्तव में प्रतिशत के साथ काम करता है: border-radius: 50%/100%(क्रोम 60 + 61 में परीक्षण किया गया)

— denns

Answer 2

बस पहले मूल्य को आप चाहते हैं% से विभाजित करें .. इसलिए यदि आप 50% की सीमा-त्रिज्या चाहते हैं, तो लिखें:

border-radius: 25%/50%; 

या कोई अन्य उदाहरण:

border-radius: 15%/30%;

आप गणित को js या SASS में आसानी से कर सकते हैं।

Comments

क्या सिर्फ 25% चौड़ाई और 50% ऊँचाई नहीं है? यह एक्स और वाई दोनों दिशाओं में ऊंचाई का 50% के बराबर नहीं है।

— एमपीएन

क्या इस वाक्यविन्यास है! यह काम करता हैं! मुझे नहीं पता था कि यह अस्तित्व में है, यह अच्छा है!

— उरी कुटनर

यह सिर्फ गणित भाई है

— साइबरजे

मुझे नहीं पता कि आप किस तरह का गणित कर रहे हैं, लेकिन यह "सिर्फ गणित" नहीं है। यह सीमा-त्रिज्या के लिए एक विशेष रूप से परिभाषित आशुलिपि है जिसका अंकगणित विभाजन से कोई लेना-देना नहीं है। w3.org/TR/css-backgrounds-3/#border-radius

— MI राइट