CSS가 다양한 모양을 구현하는 방법

CSS로 다양한 모양을 구현하는 방법: 1. 원의 경우 CSS 설정 시 너비와 높이를 동일하게 설정한 다음 [border-radius] 속성을 너비 또는 높이의 절반으로 설정합니다. 가장 간단한 CSS 그래픽입니다. 그래픽 중 하나도 div를 사용하고 ID를 설정합니다.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS로 다양한 도형을 구현하는 방법:

1.원

CSS를 사용하여 원을 만들려면 ID가 설정된 div가 필요합니다.

<div id="circle"></div>

원의 경우 CSS를 설정할 때 너비와 높이를 동일하게 설정한 다음 border-radius 속성을 너비 또는 높이의 절반으로 설정하세요.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

2 정사각형

정사각형이 가장 간단합니다. CSS 그래픽 중 하나는 div를 사용하고 ID를 설정합니다.

<div id="square"></div>

CSS 스타일에서는 너비와 높이만 동일하게 설정하면 됩니다.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

관련 튜토리얼 추천: CSS 비디오 튜토리얼

위 내용은 CSS가 다양한 모양을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!