這篇文章將簡述使用CSS3的border-radius來畫圓、半圓和四分之一圓,並如何利用它們。web
下面是border-radius屬性最基本的使用方法。瀏覽器
1 2 3 4 5 6 7 |
.round { border-radius: 5px; /* 全部角都使用半徑爲5px的圓角,此屬性爲CSS3標準屬性 */ -moz-border-radius: 5px; /* Mozilla瀏覽器的私有屬性 */ -webkit-border-radius: 5px; /* Webkit瀏覽器的私有屬性 */ border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角 */ } |
關於在IE裏怎麼實現圓角,能夠看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章。spa
如圖,是用border-radius屬性畫出來的一個完美的實心圓。畫實心圓的方法是高度和寬度相等,而且把border的寬度設爲高度和寬度的一半。代碼以下。code
1 2 3 4 5 6 |
#circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; } |
經過border-radius屬性畫空心圓和畫實心圓的方法差很少,只是border的寬度只能小於高度和寬度的一半。代碼以下。blog
1 2 3 4 5 6 7 |
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px; } |
1 2 3 4 5 6 7 |
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; } |
以本例來說,半圓的畫法是把寬度設爲高度的一半,而且也只設置左上角和左下角的半徑。代碼以下。internet-explorer
1 2 3 4 5 6 |
#quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0; } |
四分之一圓的實現方法是把高度和寬度設置爲相等,只設置一個圓角,其半徑等於高度或寬度。本例代碼以下。ci
1 2 3 4 5 6 |
#quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0; } |
看了這麼多實例後,你徹底能夠本身創造更多玩法,如:get
虛線的半圓和四分之一圓。it
配合position屬性作一個月亮。io
配合position、RGBa和z-index這些屬性作一個本文開頭的色彩維恩圖。