利用border-radious画图形

今天才发现，border-radius能够画不少图形，下面跟我来看一下吧：

在设有宽和高的状况下画一个圆：

 #div1{
        /*宽高相等，圆角范围为高或宽的一半或以上*/
            background-color: green;
            width: 120px;
            height: 120px;
            border-radius: 60px;
        }

运行结果：

当宽和高不相等的时候：

 #div1{
            /*宽大于高，圆角范围为宽的一半或以上*/
            background-color: green;
            width: 120px;
            height: 80px;
            border-radius: 60px;
        }

结果：

由于border-radius能够接受不一样的参数，咱们能够利用这个画一个椭圆：

#div1{
            /*border-radius接受水平和垂直方向不一样的值，用/隔开*/
            background-color: green;
            width: 120px;
            height: 80px;
            border-radius: 60px/40px;
        }

结果：

一个椭圆就出现了。

以上的方法画圆和椭圆很不灵活，若是宽度和高度改变，形状也会发生改变，咱们想用灵活的方式画出咱们想要的图形，就要用到百分比了：

#div1{
            /*border-radius接受百分比，用/隔开  灵活的椭圆*/
            background-color: green;
            width: 200px;
            height: 300px;
            /*等同于border-radius: 50%/50%;*/
            border-radius: 50%;
        }

结果：

还能够经过修改border-radius的值实现半个圆或椭圆的图形:

 #div1{
            /*border-radius半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
        /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 50%/100% 100% 0 0;
        } 

运行结果：

#div1{
            /*border-radius半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 100% 0 0 100%/50%;
        }

结果：

四分之一的椭圆也是能够的哦：

 #div1{
            /*border-radius 1/4半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 100%  0 0 0/100%;
        }

结果：

#div1{
            /*border-radius 1/4半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 0 0 100% 0/100%;
        }

结果：

绘制其余图形：

 #div1{
            /*border-radius半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 100% 0 100% 0/50%;
        }

 

 #div1{
            /*border-radius半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 0 100% 0 100% /100%;
        }

运行结果：

 #div1{
            /*border-radius半椭圆*/
            background-color: green;
            width: 100px;
            height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
            border-radius: 50% 50% 50% 0/50%;
        }

你们能够本身修改border-radius的值去看看会产生哪些图形，这里我就再也不写了。