Home » CSS3 研究室

[CSS3]border-radius 圓角效果

[ 日期： | 瀏覽：71,719 | 迴響：4 ]
範例 1

也許之前當你要弄個有圓角樣式的區塊或是按鈕時都要用圖片來達成，可是當瀏覽器支援 border-radius 屬性後，只要透過 CSS 的設定就能完成一樣的效果囉。

檢視原始碼 CSS
1
2
3
4
5
6
7
8

/* 一次設定四個角 */
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
 
/* 分別設定 */
border-top-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-bottom-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-bottom-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-top-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?

我想還是直接看實例會比較好理解。先準備幾個普通的 div 區塊：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

	<div class="demo1">border-radius</div>
 
	<div class="demo2">border-radius</div>
 
	<div class="demo3">border-radius</div>
 
	<div class="demo4">border-radius</div>
 
	<div class="demo5">border-radius</div>
 
	<div class="demo6">border-radius</div>
 
	<div class="demo7">mouseover</div>
</body>

先設定個通用的樣式：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10

div {
	margin: 20px 0;
	width: 300px;
	height: 100px;
	line-height: 100px;
	border: 1px solid #ccc;
	font-size: 24px;
	font-weight: 900;
	text-align: center;
}

基本的圓角用法：

檢視原始碼 CSS
1
2
3

.demo1 {
	border-radius: 10px;
}

若只指定一個值時，則會套用在四個邊角；且值的部份也能用百分比(%)的方式來設定。

分別設定四個角的圓角角度，依左上、右上、右下及左下的順序來設定：

檢視原始碼 CSS
1
2
3

.demo2 {
	border-radius: 10px 20px 30px 40px;
}

但當設定值大於 1 個且小於 4 個時，則缺的邊角會用對角的圓角值來套用。

每一個圓角又分為 X 軸(水平)及 Y 軸(垂直)，所以若想特別指定的話：

檢視原始碼 CSS
1
2
3
4

/* 先設定 X 軸(水平)再設定 Y 軸(垂直) */
.demo3 {
	border-radius: 70px 10px 10px 10px / 70px 10px 10px 10px;
}

左上及右下為圓角樣式：

檢視原始碼 CSS
1
2
3
4

.demo4 {
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
}

若是搭配高度來做變化時：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12

.demo5 {
	border-radius: 50px;	/* 高度 / 2 */
}
 
/* 用 CSS 產生完整的圓形 */
.demo6 {
	width: 300px;
	height: 300px;
	line-height: 300px;
	border: 1px dashed red;
	border-radius: 300px;	/* 高度 */
}

其中有幾點需要注意的，目前筆者在 IE 9、Firefox 5、Chrome 14、Safari 5 及 opera 11.5 中測試 border-radius 是均可使用的。但 Safari 不允許使用百分比(%)的方式來設定；而 Firefox 的圓角部份都是使用實線，並不會隨著 border-style 的設定而改變。

若需要用 jQuery 來控制圓角時，border-radius 可一次設定四邊；而 borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius 及 borderBottomRightRadius 則是分別設定使用：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(function(){
	$('.demo7').hover(function(){
		$(this).stop().animate({
			borderRadius: 50
		});
	}, function(){
		var $this = $(this), 
			str = 'top left radius:' + $this.css('borderTopLeftRadius') + '<br />' + 
				'top right radius:' + $this.css('borderTopRightRadius') + '<br />' + 
				'bottom left radius:' + $this.css('borderBottomLeftRadius') + '<br />' + 
				'bottom right radius:' + $this.css('borderBottomRightRadius');
 
		$this.html(str).stop().animate({
			//borderRadius: 0,	// 直接使用會馬上變回直角
			borderTopLeftRadius: 0, 
			borderTopRightRadius: 0, 
			borderBottomLeftRadius: 0, 
			borderBottomRightRadius: 0
		});
	});
});

而要取出每一邊的圓角值時，得分別利用 border-*-*-radius 取出才行，單純使用 border-radius 是取不出任何值的喔。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

4 筆針對 [CSS3]border-radius 圓角效果 的迴響

    • 如果使用者都用 IE 來瀏覽的話, 那麼他也不會知道有圓角這回事,
      或者常件的就是用圓角圖片當背景圖或是多加幾層 div 來產生圓角效果(這有很多 jQuery 外掛可幫忙)。

發表迴響