HTML5 및 CSS3를 사용하여 원을 만들고 스타일을 지정하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

HTML5 및 CSS3를 사용하여 원을 만들고 스타일을 지정하려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-11-23 12:25:16

원래의

545명이 탐색했습니다.

How Can I Create and Style Circles Using HTML5 and CSS3?

HTML5 및 CSS3에서 원 그리기

HTML5 및 CSS3에는 원 그리기에 대한 기본 지원이 없지만 혁신적인 기술을 활용한 원의 모습.

둥근 원 만들기 모서리

원을 시뮬레이션하려면 직사각형 요소를 만들고 둥근 모서리를 적용할 수 있습니다. 둥근 모서리의 반경은 생성하려는 원의 원하는 너비 또는 높이의 절반이어야 합니다.

예를 들어 다음 코드는 직경이 50픽셀인 빨간색 원을 만듭니다.

#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

로그인 후 복사

<div>

로그인 후 복사

원 안에 텍스트 추가

원 안에 텍스트를 추가하려면 위치를 지정하세요. 텍스트 요소를 원 컨테이너 내에 절대적으로 배치하고 수직 및 수평으로 중앙에 정렬합니다.

#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

로그인 후 복사

<div>

로그인 후 복사

위 내용은 HTML5 및 CSS3를 사용하여 원을 만들고 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!