欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3 border-radius屬性詳解

  發(fā)布時間：2017-07-05 16:44:25   作者：鴨梨山大哎   我要評論
這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細的代碼資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下

有什么用？

這個radius屬性，可不只是設(shè)置圓角，還可以用來畫一些簡單的圖形。

畫個圓形

    #demo1 {
        width:100px;
        height:100px;
        background:red;
        border-radius: 50%;    
    }

上述50%就是說設(shè)置各邊圓角都為50%。

那么如何畫個半圓？

如下，把寬度設(shè)置為高度的兩倍。

    #demo2 {
        width:100px;
        height:50px;
        background:green;
        border-radius: 50px  50px 0 0;
             }

結(jié)果。如圖，矩形為100*50 。然后左上角和右上角的圓角分別是50px。因此就是半圓了。

左側(cè)半圓

    #demo3 {
        width:50px;
        height:100px;
        background: pink;
        border-radius: 50px 0 0 50px;
    }


 

畫半圓了，關(guān)鍵是把握住寬度和高度的比例關(guān)系，先畫個矩形，然后設(shè)置各個方向的圓角就可以了。注意順序是從左上角開始的順時針方向。

1/4圓呢？

    #demo4 {
        width:100px;
        height:100px;
        background:gray ;
        border-radius: 100px 0 0 0;

    }

先畫一個正方形，然后設(shè)置任意一個圓角為100%就可以。設(shè)置哪個角度是100%哪個角度就是弧線。

PS

css里并沒有直接畫圓的，而是通過圓角實現(xiàn)的，當然你也可以通過canvas來實現(xiàn)。

參考

2．半圓圖解CSS3：核心技術(shù)與案例實戰(zhàn) 

相關(guān)文章

最新評論