এই সিএসএস কীভাবে একটি বৃত্ত তৈরি করে?

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

— মেকানিক

বৃত্ত তৈরির জন্য, এফওয়াইআই, <কোড> সীমানা-ব্যাসার্ধ ব্যবহার করুন: 50% </code> - আপনার বিন্যাসটি ডানদিকে পাওয়ার পরে কেবল প্রস্থ / উচ্চতা সামঞ্জস্য করা সহজ করে তোলে।

— ডেভিড গিলবার্টসন

হ্যাঁ মহিলা, এটি একটি গণিত এর

— Medet Tleukabiluly

Answer 1

উচ্চতা / প্রস্থ-> 0px সহ 180 পিক্সেলের সীমানা 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;
}

যেহেতু আপনার উদাহরণে সমস্ত কোণ / সীমানার আকার এবং ব্যাসার্ধ সমান আপনি একটি বৃত্ত পাবেন।

আরও সংস্থান

তথ্যসূত্র

• ডাব্লু 3 সি: সিএসএস ব্যাকগ্রাউন্ডস এবং সীমানা মডিউল স্তর 3 (উদাহরণস্বরূপ 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-বক্সটি পুনরায় লেখার জন্য মুলতুবি রয়েছে)।

— BoltClock

@ বল্টক্লক: আমি ভেবেছিলাম সিএসএস-বক্স প্রান্তগুলি সংজ্ঞায়িত করবে । সূচনায় (অ-আদর্শিক) সিএসএস ২.১-বাক্সের কেবলমাত্র একটি রেফারেন্স রয়েছে, এবং প্রদত্ত চিত্রটিও সেখানে রয়েছে, সুতরাং CSS3-বাক্সটি আসলে বুঝতে হবে না border-radius(CSS3- এর পুনরায় লেখায় কী কী পরিবর্তন আশা করা যায়) বক্স?)।

— জিটা

@ জেটা আমার মনে মূর্খ প্রশ্ন আছে আপনি কেন circleবর্ডার বানাতে চান ??? আমরা সহজেই করতে পারেন circleসঙ্গে widthএবং heightকেন আমরা নাborder

— মেকানিক

@ সরফরাজ: ওপি-র প্রশ্নটি একবার দেখুন: "সুতরাং, 180px এর একটি সীমানা 180px height/width-> 0pxব্যাসার্ধের সাথে একটি বৃত্তে পরিণত হয় কী করে?" । আমি সহজভাবে প্রশ্নের উত্তর। চেনাশোনা তৈরি করার অন্যান্য উপায় রয়েছে, তবে ওপিতে এই নির্দিষ্ট পদ্ধতিটি কীভাবে কাজ করে তা কেবল আগ্রহী ছিল।

— জিটা

@ জেটা: ঠিক কী পরিবর্তন হবে তা আমি নিশ্চিত নই, তবে ডাব্লুডি 6 বছরের মধ্যে আপডেট করা হয়নি বলে আমি সন্দেহ করি যে এর অনেকটা হবে। আমি জানি যে বিভাগ 11 ( overflowসম্পত্তিগুলির পরিবার) এখন তার নিজস্ব মডিউল, সিএসএস-ওভারফ্লো -3 এ বাস করে তবে এটি এখনও ইডিতে প্রতিফলিত হয়নি। আপনি ইডিতে প্রচুর পরিমাণে সমস্যা দেখতে পাবেন, তবে আমি ধারণা করি এটি কোনও বিস্তৃত তালিকা নয়: dev.w3.org/csswg/css3-box

— বোল্টক্লক

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অভিন্ন আউটপুট দেবে।

প্র: কেন আমি ব্যবহার করেছি 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 এবং .b" এর মধ্যে এখানে একটি তুলনা করা হচ্ছে "আপনি এখানে কী বলার চেষ্টা করছেন তা আমি নিশ্চিত নই।

— BoltClock