利用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的值去看看會產生哪些圖形，這裏我就再也不寫了。