CSS로 원을 만드는 방법

青灯夜游원래의: 2021-04-08 17:57:1611134검색

CSS에서는 border-radius 속성을 사용하여 원을 만들 수 있습니다. border-radius 속성은 요소에 둥근 테두리를 추가할 수 있습니다. 너비와 높이가 동일한 정사각형 요소입니다.

CSS로 원을 만드는 방법

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

p+Css는 주로 Css3.0에서 모서리의 border-radius 숨겨진 속성을 사용하여 1/4원을 만듭니다. 이 속성을 사용하면 원, 반원, 3/4원, 1/4원을 그릴 수 있습니다. 원 등은 추후에 업데이트하겠습니다...

border-radius 속성을 사용하는 방법 중 가장 기본적인 border-radius 속성 사용 방법은 다음과 같습니다.

.round {
    border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
    -moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
    -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
    border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}

1. -원을 그리는 반경:

#circle {
    width: 200px;
    height: 200px;
    background-color: #a72525;
    -webkit-border-radius: 100px;
    /*-webkit-border-radius: 100%;*/
}

잘 생각해 보세요. 정사각형(200*200)에서 가장 큰 원의 반경은 100입니다.

2. 속이 빈 원 코드: 실제로는 속이 빈 원입니다. 테두리만 있고 빈 부분은 다른 색상으로 채워져 있습니다:

#circle {
    width: 200px;
    height: 200px;
    background-color: #efefef; /* Can be set to transparent */
    border: 3px #a72525 solid;
    -webkit-border-radius: 100px;
}

유사한 점선 원 코드:

#circle {
    width: 200px;
    height: 200px;
    background-color: #efefef; /* Can be set to transparent */
    border: 3px #a72525 dashed;
    -webkit-border-radius: 100px 100px 100px 100px;
}

CSS로 원을 만드는 방법

3.반원 및 1/4원 코드:

#quartercircle {
    width: 200px;
    height: 200px;
    background-color: #a72525;
    -webkit-border-radius: 200px 0 0 0;
}

CSS로 원을 만드는 방법

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
      #quartercircle{
        width: 200px;
        height: 200px;
        background-color: #ffffaa;
        border-radius:0 0 0 200px;
        -webkit-border-radius: 0 0 0 200px;
        -moz-border-radius: 0 0 0 200px;
        -ms-border-radius: 0 0 0 200px;
        -o-border-radius: 0 0 0 200px;
        }
     #quartercircle .dianxuan{
        font-family:Arial;
        color:gray;
        font-size:25px;
        padding-top: 55px;
        padding-left: 90px;
        transform:rotate(32deg);
        -ms-transform:rotate(32deg); /* Internet Explorer */
        -moz-transform:rotate(32deg); /* Firefox */
        -webkit-transform:rotate(32deg); /* Safari 和 Chrome */
        -o-transform:rotate(32deg); /* Opera */
     }

  </style>
 </head>
 <body>
  <div id="quartercircle">
  <div>点选</div>
  </div>
 </body>
</html>

CSS로 원을 만드는 방법

설명:

-moz(예: -moz-border-radius)는 Firefox

-webkit(예: -webkit-border-radius)은 Safari 및 Chrome에서 사용됩니다.

경계 반경 브라우저 지원은 표에 나와 있습니다:

BrowserSupportFirefox(2, 3+)√Google Chrome(1.0.154+…) √Google Chrome(2.0.156 + …)√Safari(3.2.1+ windows)√Internet Explorer(IE7, IE8)× Opera 9.6×

(동영상 공유 알아보기:

css 동영상 튜토리얼)

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

html5 firefox css chrome safari css3 webkit border windows

성명：

이전 기사：CSS에서 수직 센터링 방법은 무엇입니까?다음 기사：CSS에서 수직 센터링 방법은 무엇입니까?