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 중국어 웹사이트의 기타 관련 기사를 참조하세요!