纯CSS实现半圆、1/4圆

【前言】

     本文简单介绍下实现半圆、1/4圆的几种方案

 

【主体】

      （1）半圆

    实现原理：border两个方向的值的设定

    1、下半圆

<div class="area"></div>
.area{
	width: 100px;
	height: 50px;
	background: red;
	border-radius: 0px 0px 100px 100px;
}

   
 

    2、上半圆

    3、左半圆

    4、右半圆

 

      （2）1/4圆

    实现原理：border四个方向的值的设定---上右下左

    1、左上角1/4圆

<div class="area"></div>
.area{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 100px 0px 0px 0px;
    margin: 10px;
}

   
     2、右上角border-radius: 0px 100px 0px 0px;   

     3、左下角border-radius: 0px 0px 100px 0px;

     4、右下角border-radius: 0px 0px 0px 100px;

 

 

      今天先写到这里，稍后继续

 

 

.