यह CSS एक वृत्त कैसे उत्पन्न करता है?

Question

यह सीएसएस है:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

यह नीचे दिए गए सर्कल का उत्पादन कैसे करता है?

मान लीजिए, यदि आयत की चौड़ाई 180 पिक्सेल है और ऊँचाई 180 पिक्सेल है तो यह इस तरह दिखाई देगा:

बॉर्डर-रेडियस 30 पिक्सल्स लगाने के बाद यह इस तरह दिखाई देगा:

आयत छोटा होता जा रहा है, अर्थात, यदि त्रिज्या का आकार बढ़ता है तो लगभग गायब हो जाएगा।

तो, 180 पिक्सेल की height/width-> 0pxत्रिज्या के साथ एक सर्कल के साथ 180 पिक्सेल की सीमा कैसे होती है ?

Comments

यह एक 0x0 वस्तु है जिसके चारों ओर 180 पिक्सेल बॉर्डर है जो गोल कोनों है। तो गोल कोने एक वृत्त के चतुर्भुज हैं।

— काज

मेरे मन में एक मूर्खतापूर्ण प्रश्न है कि आप circleसीमा के साथ क्यों बनाना चाहते हैं ??? हम आसानी से कर सकते हैं circleके साथ widthऔर heightतो क्यों हम से कोई लेनाborder

— मैकेनिक

FYI करें, सर्कल मेकिंग के लिए, <code> border-radius: 50% </ code> का उपयोग करें - यह आपके लेआउट को सही होने पर सिर्फ चौड़ाई / ऊँचाई को समायोजित करना आसान बनाता है।

— डेविड गिल्बर्टसन

हां महिलाओं, यह एक गणित है

— मेडेट टिलुकएबुल 4

Answer 1

ऊंचाई / चौड़ाई के साथ 180 पिक्सेल की सीमा कैसे होती है-> 0px 180 पिक्सेल की त्रिज्या वाला एक वृत्त बन जाता है?

चलो दो प्रश्नों में सुधार करते हैं:

कहां widthऔर heightवास्तव में लागू होते हैं?

आइए एक विशिष्ट बॉक्स ( स्रोत ) के क्षेत्रों पर एक नज़र डालें :

heightऔर width, केवल सामग्री पर लागू होते हैं, तो सही बॉक्स मॉडल का इस्तेमाल किया जा रहा है (कोई quirks मोड, कोई पुराने इंटरनेट एक्सप्लोरर)।

कहां border-radiusलागू होता है?

border-radiusसीमा-किनारे पर लागू होता है। यदि न तो पैडिंग है और न ही बॉर्डर तो यह सीधे आपके कंटेंट एज को प्रभावित करेगा, जिसके परिणामस्वरूप आपका तीसरा उदाहरण है।

हमारी सीमा-त्रिज्या / सर्कल के लिए इसका क्या अर्थ है?

इसका मतलब है कि आपके सीएसएस नियमों का परिणाम एक बॉक्स में होता है जिसमें केवल एक सीमा होती है। आपके नियमों में कहा गया है कि इस सीमा की अधिकतम चौड़ाई हर तरफ 180 पिक्सेल होनी चाहिए, जबकि दूसरी ओर इसके आकार की अधिकतम त्रिज्या होनी चाहिए:

तस्वीर में, आपके तत्व की वास्तविक सामग्री (छोटी काली बिंदु) वास्तव में अस्तित्वहीन है। यदि आपने कोई आवेदन नहीं किया है तो आप border-radiusहरे बॉक्स के साथ समाप्त हो जाएंगे। border-radiusआप नीले वृत्त देता है।

यदि आप इसे लागू करते हैं, तो समझना आसान हो जाता है border-radius केवल दो कोनों पर :

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

चूंकि आपके उदाहरण में सभी कोनों / सीमाओं के लिए आकार और त्रिज्या समान हैं, इसलिए आपको एक वृत्त मिलता है।

आगे के संसाधन

संदर्भ

• W3C: CSS बैकग्राउंड और बॉर्डर्स मॉड्यूल लेवल 3 (esp)। 5. गोल कोनों )

प्रदर्शनों

• कृपया नीचे डेमो खोलें, जो दिखाता है कि border-radiusसीमा को कैसे प्रभावित करता है (सामग्री बॉक्स के रूप में आंतरिक नीले बॉक्स के बारे में सोचो, पैडिंग बॉर्डर के रूप में आंतरिक ब्लैक बॉर्डर, पैडिंग के रूप में खाली स्थान और विशाल लाल बॉर्डर, के रूप में अच्छी तरह से, सीमा)। आंतरिक बॉक्स और लाल बॉर्डर के बीच अंतर आमतौर पर कंटेंट एज को प्रभावित करता है।

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

Comments

मुझे नहीं लगता कि css3- बैकग्राउंड css3-box का कोई संदर्भ देता है (css3-box एक पुन: लिखना लंबित है)।

— BoltClock

@ बॉलकॉक: मैंने सोचा था कि सीएसएस 3-बॉक्स किनारों को परिभाषित करेगा । परिचय (गैर-आदर्श) में css2.1- बॉक्स का केवल एक संदर्भ है, और दी गई छवि भी है, इसलिए border-radiuscss3- बॉक्स को वास्तव में समझने की आवश्यकता नहीं है ( css3 के पुनर्लेखन में क्या बदलाव होने की उम्मीद है) डिब्बा?)।

— ज़ेटा

@Zeta मेरे मन में एक मूर्खतापूर्ण सवाल है कि आप circleसीमा के साथ क्यों बनाना चाहते हैं ??? हम आसानी से कर सकते हैं circleके साथ widthऔर heightतो क्यों हम से कोई लेनाborder

— मैकेनिक

@ सरफराज: ओपी के सवाल पर एक नजर: "तो, 180px की सीमा के साथ 180px की सीमा कैसे height/width-> 0pxबन जाती है?" । मैंने बस सवाल का जवाब दिया। एक सर्कल बनाने के अन्य तरीके हैं, लेकिन ओपी को केवल यह दिलचस्पी थी कि यह विशिष्ट विधि कैसे काम करती है।

— ज़ीटा

@Zeta: मुझे यकीन नहीं है कि वास्तव में क्या बदला जाएगा, लेकिन यह देखते हुए कि WD 6 वर्षों में अपडेट नहीं किया गया है, मुझे संदेह है कि यह बहुत अधिक होगा। मुझे पता है कि धारा 11 ( overflowसंपत्तियों का परिवार) अब अपने स्वयं के मॉड्यूल, सीएसएस-ओवरफ्लो -3 में रहता है, लेकिन यह ईडी में अभी तक प्रतिबिंबित नहीं हुआ है। आप प्रवर्तन निदेशालय में मुद्दों के बहुत सारे देखेंगे, लेकिन मैं इसे एक विस्तृत सूची नहीं है कल्पना: dev.w3.org/csswg/css3-box

— BoltClock

Answer 2

डेमो

आइए इस चित्र प्रदर्शन के साथ किसी अन्य तरीके से प्रश्न की जाँच करें:

आइए पहले देखें कि सीमा त्रिज्या कैसे उत्पन्न होती है?

त्रिज्या का उत्पादन करने के लिए इसकी सीमा के दो पक्ष लगते हैं। यदि आप बॉर्डर-त्रिज्या को 50 पिक्सेल पर सेट करते हैं तो यह एक तरफ से 25 पिक्सेल और दूसरी तरफ से 25 पिक्सेल लेगा।

और प्रत्येक पक्ष से 25 पिक्सेल लेते हुए यह इस तरह से उत्पादन करेगा:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

अब देखें कि एक कोने पर लगाने के लिए अधिकतम कितना वर्ग ले सकता है?

यह ऊपर से 180 पिक्सेल और दाईं ओर से 180 पिक्सेल ले सकता है। तो यह इस तरह का उत्पादन होगा:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

और यह देखें कि यदि हम त्रिज्या के गैर-बराबर मूल्य को सेट करते हैं तो यह कैसे उत्पन्न होता है?

मान लीजिए, यदि आप सीमा त्रिज्या को केवल दो कोनों पर लागू करते हैं:

• शीर्ष-दाएं कोने में 180 पिक्सेल तक

• नीचे-दाएं कोने में 100 पिक्सेल

तब लगेगा

• टॉप-राइट: टॉप से ​​90 पिक्सल और राइट से 90 पिक्सल

• नीचे-दाएं: दाईं ओर से 50 पिक्सेल और नीचे से 50 पिक्सेल

तब यह इस तरह का उत्पादन करेगा

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

सभी पक्षों पर लागू करने के लिए इसकी सीमा का अधिकतम कितना भाग ले सकता है? और देखें कि यह एक वृत्त कैसे उत्पन्न करता है?

यह सीमा-आकार के आधे हिस्से तक ले जा सकता है, अर्थात 180 पिक्सेल / 2 = 90 पिक्सेल। तब यह इस तरह एक सर्कल का उत्पादन करेगा

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

सभी पक्षों पर लागू करने के लिए वर्ग का केवल आधा हिस्सा क्यों लेता है?

क्योंकि सभी कोनों को अपना त्रिज्या मान समान रूप से निर्धारित करना होता है।

इसकी सीमा के बराबर भागों को लेते हुए, यह एक चक्र का निर्माण करता है।

Comments

वास्तव में इस उत्तर का वर्तमान संस्करण इसे थोड़ा दूर तक ले जाता है। सवाल बस यह है कि "यह सीएसएस कैसे एक सर्कल बनाता है", न कि "सामान्य रूप से सीमा-त्रिज्या कैसे काम करती है", इसलिए तकनीकी रूप से सही होने पर यह थोड़ा बहुत है। इसके अलावा, आप प्रश्न को सुधार सकते हैं और कोड वातावरण में वास्तविक कोड डाल सकते हैं।

— ज़ीटा

Answer 3

सीमाएं किसी भी सामग्री का बाहरी बॉक्स होती हैं और यदि आप इस पर त्रिज्या लगाते हैं, तो यह बस गोलाकार धार पैदा करेगा।

Answer 4

मुझे लगता है कि यह शुरू में आयताकार बनाता है height and width = 180pxऔर फिर 30pxप्रत्येक कोने की तरह दिए गए त्रिज्या के साथ वक्र बनाता है । तो यह borderदिए गए के साथ सेट करता है radius।

Answer 5

दोनों .aऔर .bसमान उत्पादन दे देंगे।

Q. मैंने क्यों इस्तेमाल किया width: 360px; height: 360px;?

ए border: 180px solid red;में .aकी तरह काम करता है border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */।

आशा है कि यह पहेली आपको अवधारणा को समझने में मदद करेगी ।

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}

Comments

है ना? ".A कैसे काम करता है?" "यहां .a और .b के बीच तुलना की गई है" मुझे यकीन नहीं है कि आप यहां कहने की कोशिश कर रहे हैं।

— बोल्टलॉक