Đây là CSS:

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

Làm thế nào để nó tạo ra vòng tròn dưới đây?

Giả sử, nếu chiều rộng hình chữ nhật là 180 pixel và chiều cao là 180 pixel thì nó sẽ xuất hiện như thế này:

Sau khi áp dụng bán kính đường viền 30 pixel, nó sẽ xuất hiện như sau:

Hình chữ nhật đang trở nên nhỏ hơn, nghĩa là gần như sẽ biến mất nếu kích thước bán kính tăng.

Vậy, làm thế nào để đường viền 180 pixel height/width-> 0pxtrở thành một vòng tròn có bán kính 180 pixel?

Làm thế nào để đường viền 180 pixel có chiều cao / chiều rộng-> 0px trở thành một vòng tròn có bán kính 180 pixel?

Hãy điều chỉnh lại thành hai câu hỏi:

Làm ở đâu widthvà heightthực sự áp dụng?

Chúng ta hãy xem các khu vực của một hộp thông thường ( nguồn ):

Các heightvà widthchỉ áp dụng trên nội dung, nếu mô hình hộp đúng đang được sử dụng (không có chế độ quirks, không già Internet Explorer).

Áp border-radiusdụng ở đâu?

Áp border-radiusdụng trên các cạnh biên. Nếu không có phần đệm cũng như đường viền, nó sẽ ảnh hưởng trực tiếp đến cạnh nội dung của bạn, dẫn đến ví dụ thứ ba của bạn.

Điều này có ý nghĩa gì đối với bán kính biên giới / vòng tròn của chúng tôi?

Điều này có nghĩa là các quy tắc CSS của bạn dẫn đến một hộp chỉ bao gồm một đường viền. Quy tắc của bạn nêu rõ rằng đường viền này phải có chiều rộng tối đa 180 pixel ở mọi phía, trong khi mặt khác nó phải có bán kính tối đa có cùng kích thước:

Trong ảnh, nội dung thực tế của yếu tố của bạn (chấm đen nhỏ) thực sự không tồn tại. Nếu bạn không áp dụng bất kỳ, border-radiusbạn sẽ kết thúc với hộp màu xanh lá cây. Cung border-radiuscấp cho bạn các vòng tròn màu xanh.

Sẽ dễ hiểu hơn nếu bạn chỉ áp dụng border-radius cho hai góc :

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

Vì trong ví dụ của bạn, kích thước và bán kính cho tất cả các góc / viền bằng nhau, bạn có được một vòng tròn.

Thêm tài nguyên

Người giới thiệu

• W3C: Mô-đun và Biên giới CSS Cấp độ 3 (đặc biệt 5. Các góc tròn )

Biểu tình

• Vui lòng mở bản demo bên dưới, cho biết mức độ border-radiusảnh hưởng của đường viền (nghĩ về hộp màu xanh bên trong là hộp nội dung, đường viền màu đen bên trong là đường viền đệm, không gian trống làm đệm và đường viền màu đỏ khổng lồ, tốt, biên giới). Giao lộ giữa hộp bên trong và đường viền màu đỏ thường sẽ ảnh hưởng đến cạnh nội dung.

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>

Bản giới thiệu

Hãy xem xét câu hỏi theo cách khác với trình diễn hình ảnh này:

Trước tiên hãy xem bán kính đường viền được sản xuất như thế nào?

Để sản xuất bán kính phải có hai mặt của đường viền của nó. Nếu bạn đặt bán kính đường viền thành 50 pixel thì sẽ mất 25 pixel từ một phía và 25 pixel từ một phía khác.

Và lấy 25 pixel từ mỗi bên, nó sẽ tạo ra như thế này:

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

Bây giờ hãy xem có thể mất bao nhiêu hình vuông để áp dụng trên một góc?

Nó có thể mất tới 180 pixel từ trên xuống và 180 pixel từ bên phải. Sau đó, nó sẽ sản xuất như thế này:

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

Và xem điều này nó tạo ra như thế nào nếu chúng ta đặt giá trị bán kính không bằng nhau?

Giả sử, nếu bạn chỉ áp dụng bán kính đường viền cho hai góc không bằng nhau:

• góc trên bên phải đến 180 pixel

• góc dưới bên phải đến 100 pixel

Sau đó, nó sẽ mất

• trên cùng bên phải: 90 pixel từ trên cùng và 90 pixel từ bên phải

• dưới cùng bên phải: 50 pixel từ bên phải và 50 pixel từ dưới cùng

Sau đó, nó sẽ sản xuất như thế này

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

Làm thế nào tối đa biên giới của nó có thể mất vuông để áp dụng trên tất cả các mặt? Và xem làm thế nào nó tạo ra một vòng tròn?

Nó có thể chiếm tới một nửa kích thước đường viền, nghĩa là 180 pixel / 2 = 90 pixel. Sau đó, nó sẽ tạo ra một vòng tròn như thế này

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

Tại sao nó chỉ mất một nửa hình vuông để áp dụng trên tất cả các mặt?

Bởi vì tất cả các góc phải đặt giá trị bán kính bằng nhau.

Lấy các phần bằng nhau của biên giới của nó, nó tạo ra một vòng tròn.

Đường viền là hộp bên ngoài của bất kỳ nội dung nào và nếu bạn áp dụng bán kính trên nó, nó sẽ chỉ tạo ra cạnh tròn.

Tôi nghĩ rằng ban đầu nó tạo ra hình chữ nhật với height and width = 180pxvà sau đó tạo đường cong với bán kính cho trước như 30pxvới mỗi góc. Vì vậy, nó thiết lập bordervới cho radius.

Cả hai .avà .bsẽ cho đầu ra giống hệt nhau.

Q. Tại sao tôi sử dụng width: 360px; height: 360px;?

A. border: 180px solid red;trong .acông trình như thế nào border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Hy vọng fiddle này giúp bạn hiểu khái niệm.

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