Home  >  Article  >  Web Front-end  >  How to make a circle in css

How to make a circle in css

青灯夜游
青灯夜游Original
2021-04-08 17:57:1611201browse

In CSS, you can use the border-radius attribute to make a circle; the border-radius attribute can add a rounded border to an element. You only need to set "border-radius: 100%" to a square element with the same width and height. ;" style is enough.

How to make a circle in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

p Css to make a quarter circle mainly uses the border-radius rounded corner hidden attribute in Css3.0. Using this attribute, we candraw a circle, a semicircle, and a quarter circle Three circles, quarter circles, etc. I will update in the future...

How to use the border-radius attribute, the following is the most basic method of using the border-radius attribute:

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

1. Use border-radius to draw a circle:

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

Think about it carefully, the radius of the largest circle in a square (200*200) is: 100.

2. Hollow circle code: The hollow circle actually has only a border, and the hollow part is filled with other colors:

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

Similarly dotted circle code:

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

How to make a circle in css

3. Semicircle and quarter circle codes :

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

How to make a circle in 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>

How to make a circle in css

Explanation:

-moz(for example-moz -border-radius) for Firefox

-webkit (for example: -webkit-border-radius) for Safari and Chrome

Among them, the support of each browser of border-radius is as shown in the table:

Browser Support
Firefox(2, 3)
Google Chrome(1.0.154…)
Google Chrome(2.0.156…)
Safari(3.2.1 windows)
Internet Explorer(IE7, IE8) ×
Opera 9.6 ×

(Learning video sharing: css Video tutorial)

The above is the detailed content of How to make a circle in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn