CSS3에서 원을 그리는 방법

CSS3 원 그리기 구현 방법: 먼저 HTML 샘플 파일을 생성한 다음 div를 정의하고 이름을 "circle"로 지정합니다. 마지막으로 CSS 속성 "border-radius"를 사용하여 div가 원 효과를 얻도록 합니다.

이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, HTML5&&CSS3 버전.

추천: "css 비디오 튜토리얼"

css는 사진 표시를 대체하기 위해 다양한 간단한 도형을 그리는 데 사용할 수 있습니다. 이 공유는 주로 원과 섹터를 그리는 데 사용됩니다.

원형 모양을 구현하는 효과

<div class="circle"></div>
<style>
.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>

는 다음과 같습니다.

border-radius 둥근 모서리의 네 가지 값은 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 아래입니다. 왼쪽. 여기서는 하나의 값만 설정했는데, 이는 네 모서리의 값이 모두 50%라는 뜻입니다

Principle:

border-radius: 50% 요소의 테두리를 구부려 원을 만듭니다.

원은 특정 지점에서 동일한 반경을 가지므로 너비와 높이는 동일한 값이어야 합니다. 값이 다르면 타원이 생성됩니다.

부채 모양 구현

border-radius를 사용하여 90도 부채 모양 구현:

<div class="sector"></div>
<style>
.sector{
  border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>

효과는 다음과 같습니다.

원리:

왼쪽 상단 모서리는 둥근 모서리이고 다른 하나는 모서리입니다. 세 모서리는 직각입니다. 왼쪽 위 모서리 값은 너비 및 높이와 동일하며 다른 세 모서리의 값은 변경되지 않습니다(0과 동일).

어떤 각도로든 부채꼴을 그립니다.

효과는 다음과 같습니다.

/60도 부채꼴 그리기/

/85도 부채꼴 그리기/

/오른쪽 방향 그리기 섹터, 90도 섹터/

/*색상 섹터 그리기*/

/*다양한 색상의 반원 각도 그리기*/

완전한 코드는 다음과 같습니다.

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个85度扇形*/--p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个向右扇形，90度扇形*-->
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--*绘制一个颜色扇形 */--p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<!--/*绘制一个不同颜色半圆夹角 */-->
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<style>
.shanxing{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: yellow;
}
.sx1{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);/*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，
     使用clip属性，元素必须是absolute的 */
     
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an1 2s infinite linear; */
}
.sx2{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    clip: rect(0px,100px,200px,0px);
    border-radius: 100px;
    background-color: #f00;
    /*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);}
.shanxing1 .sx2{transform: rotate(-150deg);}
/*绘制一个85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);}
.shanxing2 .sx2{transform: rotate(-140deg);}
/*绘制一个向右扇形，90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);}
.shanxing3 .sx2{transform: rotate(-45deg);}
/*绘制一个颜色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*绘制一个不同颜色半圆夹角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;       
</style>

위 내용은 CSS3에서 원을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!