CSS3:border-radius隱藏的威力

這篇文章將簡述使用CSS3的border-radius來畫圓、半圓和四分之一圓,並如何利用它們。web

如何使用border-radius屬性

下面是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

 

1.用border-radius畫圓

實心圓

CSS3圓

如圖,是用border-radius屬性畫出來的一個完美的實心圓。畫實心圓的方法是高度和寬度相等,而且把border的寬度設爲高度和寬度的一半。代碼以下。code

1
2
3
4
5
6
#circle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 100px;
}

空心圓

CSS3空心圓

經過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;
}

虛線圓

CSS3虛線圓

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;
}

2.半圓和四分之一圓

半圓

CSS3半圓

以本例來說,半圓的畫法是把寬度設爲高度的一半,而且也只設置左上角和左下角的半徑。代碼以下。internet-explorer

1
2
3
4
5
6
#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

四分之一圓

CSS3四分之一圓

四分之一圓的實現方法是把高度和寬度設置爲相等,只設置一個圓角,其半徑等於高度或寬度。本例代碼以下。ci

1
2
3
4
5
6
#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

更多玩法

看了這麼多實例後,你徹底能夠本身創造更多玩法,如:get

semiquarter.jpg

虛線的半圓和四分之一圓。it

moon.jpg

配合position屬性作一個月亮。io

CSS3 Colour venn diagram

配合position、RGBa和z-index這些屬性作一個本文開頭的色彩維恩圖。

相關文章
相關標籤/搜索