너비와 높이를 0으로 설정하고 큰 테두리 너비와 일치하는 테두리 반경을 사용하여 CSS에서 원을 만드는 방법은 무엇입니까?

이 CSS는 어떻게 원을 생성하나요?

먼저 CSS를 분석해 보겠습니다.

div {<br> 너비: 0;<br> 높이: 0;<br> 테두리: 180px 단색 빨간색;<br> 테두리 반경: 180px;<br>}<br>

• 너비와 높이가 모두 0으로 설정되어 있습니다. 즉, 요소에 너비와 높이가 없습니다. content.


• border는 180px 단색 빨간색으로 설정됩니다. 이는 요소에 180픽셀 너비의 빨간색 테두리가 있음을 의미합니다.


• border -radius는 180px로 설정됩니다. 즉, 테두리 모서리가 반경 180으로 둥글게 됩니다. 픽셀.

이제 이러한 속성이 어떻게 함께 작동하여 원을 만드는지 생각해 보겠습니다.

너비와 너비는 어디에 있나요? 높이가 실제로 적용되나요?

너비와 높이 속성이 콘텐츠에 적용됩니다. 테두리가 아닌 요소의. 이 경우 요소에 콘텐츠가 없으므로 너비와 높이 속성은 아무런 영향을 미치지 않습니다.

border-radius는 어디에 적용되나요?

border-radius 속성은 요소의 테두리에 적용됩니다. 테두리 모서리를 지정된 반경으로 둥글게 만들 수 있습니다. 이 경우 border-radius 속성은 180px로 설정되어 있습니다. 즉, 테두리 모서리가 180픽셀의 반경으로 둥글게 됩니다.

이게 무슨 뜻인가요? 테두리 반경/원에 대해?

테두리와 원을 결합하면 border-radius 속성을 사용하면 원을 만들 수 있습니다. border 속성은 요소 주위에 직사각형 테두리를 만들고 border-radius 속성은 테두리 모서리를 지정된 반경으로 둥글게 만듭니다. 이 경우 border-radius 속성은 180px로 설정됩니다. 즉, 테두리 모서리가 180픽셀의 반경으로 둥글게 됩니다. 그러면 원이 생성됩니다.

다음은 예제의 CSS 규칙이 함께 작동하여 원을 생성하는 방법을 보여주는 다이어그램입니다.

다이어그램에서 요소(작은 검은 점)의 실제 콘텐츠는 실제로 존재하지 않습니다. 테두리 반경을 적용하지 않으면 녹색 상자가 표시됩니다. 테두리 반경은 파란색 원을 제공합니다.

추가 리소스

• W3C: CSS 배경 및 테두리 모듈 레벨 3(특히 5. 둥근 모서리)


• 시연

위 내용은 너비와 높이를 0으로 설정하고 큰 테두리 너비와 일치하는 테두리 반경을 사용하여 CSS에서 원을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!