css3实现完整圆、半圆、四分之一圆

这篇文章主要是利用css3的border-radius属性完成 完整圆、半圆、四分之一圆的实现，希望对你们有所帮助。

对于border-radius属性：

.test {
    border-radius: 5px; 
    /* 写一个值的时候代表 所有角都使用半径为5px的圆角 */
    border-radius: 5px 5px 5px 5px;
    /* 四个值分别为 左上、右上、右下、左下 */
}

1、准备结构

<div class="container">
    <div class="fullCircle">1</div>
    <div class="halfCircle">2</div>
    <div class="quarterCircle">3</div>
  </div>

2、初始化样式

* {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 1200px;
      height: 900px;
      margin: 50px auto;
      color: #fff;
      font-size: 24px;
      text-align: center;
    }
    .fullCircle,
    .halfCircle,
    .quarterCircle {
      height: 300px;
      background-color: red;
    }

3、完整圆

/* 完整圆形 */
    .fullCircle {
      width: 300px;
      border-radius: 50%;
    }

4、半圆

/* 半圆 */
    .halfCircle {
      width: 150px;
      border-radius: 150px 0 0 150px;
      /* 四个值分别为 左上、右上、右下、左下 */
    }

5、四分之一圆

.quarterCircle {
      width: 300px;
      border-radius: 300px 0 0 0;
    }

6、效果展示