นี่คือ CSS:

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

มันสร้างวงกลมด้านล่างได้อย่างไร

สมมติว่าถ้าความกว้างของรูปสี่เหลี่ยมผืนผ้าเท่ากับ 180 พิกเซลและความสูงเป็น 180 พิกเซลก็จะปรากฏดังนี้:

หลังจากใช้รัศมีเส้นขอบ 30 พิกเซลมันจะปรากฏดังนี้:

สี่เหลี่ยมเล็กลงนั่นคือเกือบจะหายไปถ้าขนาดรัศมีเพิ่มขึ้น

ดังนั้นเส้นขอบของพิกเซลที่ 180 ด้วยheight/width-> 0pxกลายเป็นวงกลมที่มีรัศมี 180 พิกเซลได้อย่างไร

เส้นขอบของพิกเซลที่มีความสูง / ความกว้าง -> 0px กลายเป็นวงกลมที่มีรัศมี 180 พิกเซลได้อย่างไร

ลองปรับที่เป็นสองคำถาม:

ทำที่ไหนwidthและheightใช้จริง?

ลองมาดูที่พื้นที่ของกล่องทั่วไป (ที่มา ):

กระบวนการheightและwidthนำไปใช้กับเนื้อหาเท่านั้นหากมีการใช้รูปแบบกล่องที่ถูกต้อง (ไม่มีโหมดแปลก ๆ ไม่มี Internet Explorer รุ่นเก่า)

สถานที่ที่ไม่border-radiusใช้?

border-radiusใช้บนขอบขอบ หากไม่มีช่องว่างภายในหรือเส้นขอบก็จะส่งผลกระทบต่อขอบเนื้อหาของคุณโดยตรงซึ่งส่งผลให้ตัวอย่างที่สามของคุณ

สิ่งนี้หมายความว่าสำหรับรัศมีเส้นขอบ / วงกลมของเรา?

ซึ่งหมายความว่ากฎ CSS ของคุณให้ผลลัพธ์ในกล่องที่ประกอบด้วยเส้นขอบเท่านั้น กฎของคุณระบุว่าเส้นขอบนี้ควรมีความกว้างสูงสุด 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>

การสาธิต

ลองตรวจสอบคำถามในอีกทางหนึ่งด้วยการสาธิตภาพนี้:

มาดูกันก่อนว่ารัศมีของขอบผลิตได้อย่างไร

ในการสร้างรัศมีมันใช้เวลาสองด้านของชายแดน หากคุณตั้งค่ารัศมีเส้นขอบเป็น 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;
}

เหตุใดจึงต้องใช้เพียงครึ่งหนึ่งของสี่เหลี่ยมจัตุรัสเพื่อใช้กับทุกด้าน

เพราะทุกมุมต้องตั้งค่ารัศมีของพวกเขาเท่า ๆ กัน

รับส่วนเท่า ๆ กันของเส้นขอบมันสร้างวงกลม

เส้นขอบเป็นกล่องด้านนอกของเนื้อหาใด ๆ และถ้าคุณใช้รัศมีบนมันก็จะสร้างขอบวงกลม

ฉันคิดว่าตอนแรกมันสร้างสี่เหลี่ยมผืนผ้าด้วยheight and width = 180pxแล้วทำโค้งด้วยรัศมีที่กำหนดเช่นเดียว30pxกับแต่ละมุม ดังนั้นมันชุดกับที่กำหนดborderradius

ทั้งสอง.aและ.bจะให้ผลลัพธ์ที่เหมือนกัน

Q. ทำไมผมใช้width: 360px; height: 360px;?

A. border: 180px solid red;ในการทำงานเช่น.aborder-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;
}