如何使用border-radius屬性

下面是border-radius屬性最基本的使用方法。

}

1.用border-radius畫圓

實心圓
畫實心圓的方法是高度和寬度相等，並且把border的寬度設為高度和寬度的一半。程式碼如下。

#circle{width:200px;
height:200px;background-color:#a72525;
-webkit-border-radius:100px;
}

空心圓

通過border-radius屬性畫空心圓和畫實心圓的方法差不多，只是border的寬度只能小於高度和寬度的一半。程式碼如下。
#circle{

虛線圓
#circle

{
width:200px;height:200px;
background-color:#efefef;/* Can be set to transparent */border:3px#a72525dashed;
-webkit-border-radius:100px100px100px100px;}

2.半圓和四分之一圓
半圓的畫法是把寬度設為高度的一半，並且也只設置左上角和左下角的半徑。程式碼如下。
#quartercircle{width:200px;
height:200px;background-color:#a72525;
-webkit-border-radius:200px000;}

四分之一圓

四分之一圓的實現方法是把高度和寬度設定為相等，只設置一個圓角，其半徑等於高度或寬度。本例程式碼如下。

#quartercircle{width:200px;height:200px;background-color:#a72525;
-webkit-border-radius:200px000;
}