이것은 CSS입니다.

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

아래 원을 어떻게 생성합니까?

사각형 너비가 180 픽셀이고 높이가 180 픽셀 인 경우 다음과 같이 나타납니다.

경계 반경 30 픽셀을 적용하면 다음과 같이 나타납니다.

사각형이 점점 작아지고 있습니다. 즉, 반지름 크기가 커지면 거의 사라집니다.

그렇다면 180 픽셀의 테두리가 height/width-> 0px반경 180 픽셀의 원이 어떻게됩니까?

높이 / 너비-> 0px 인 180 픽셀의 테두리는 반경 180 픽셀의 원이 어떻게됩니까?

이것을 두 가지 질문으로 재구성하자 :

어디 않습니다 width및 height실제 적용?

일반적인 상자 ( source ) 의 영역을 살펴 보겠습니다 .

height및 width올바른 상자 모델 (더 쿼크 모드, 아니 오래된 인터넷 익스플로러)를 사용중인 경우, 전용 콘텐츠에 적용됩니다.

어디에 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 ( 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. 그래서 bordergiven으로 설정합니다 radius.

모두 .a와 .b동일한 출력을 제공 할 것입니다.

Q. 왜 사용 width: 360px; height: 360px;했습니까?

A. 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;
}