HTML5 및 CSS3에서 원형 요소를 어떻게 만들 수 있나요?

CSS3을 사용하여 HTML5에서 원형 요소 만들기

표준 요소를 사용하여 HTML5에서 직접 원을 그리는 것은 불가능합니다. 그러나 CSS 스타일링 기술을 사용하여 근사치를 만들 수 있습니다.

둥근 모서리를 사용한 근사치

한 가지 방법은 모서리가 둥근 직사각형을 만드는 것입니다. border-radius 속성을 원하는 원의 높이나 너비의 절반으로 설정하면 부드러운 곡선이 만들어집니다.

HTML 및 CSS 코드:

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

이 코드는 시각적으로 50픽셀의 원에 가까운 둥근 모서리가 있는 빨간색 직사각형을 만듭니다. 직경.

내부에 텍스트 추가(선택 사항)

대략적인 원 내부에 텍스트를 배치하려면 HTML 태그 내의 DIV 요소에 콘텐츠를 추가하세요.

<div><p>적절한 CSS 스타일(예: text-align: center;)을 사용하여 원형 안에 텍스트를 정렬할 수 있습니다. 요소.</p></div>