在CSS3中提供了對邊框進(jìn)行圓角設(shè)定的支持，可對邊框1~4個角進(jìn)行圓角樣式設(shè)置。

目錄

1. 介紹

2. value值的格式和類型

3.?border-radius 1~4個參數(shù)說明

4. 在線示例

?

1. 介紹

1.1 圓角屬性

CSS3提供了5種圓角屬性

border-radius ：同時設(shè)置4個邊框的圓角樣式。

border-top-left-radius ：設(shè)置左上角邊框的圓角樣式。

border-top-right-radius ：設(shè)置右上角邊框的圓角樣式。

border-bottom-left-radius ：設(shè)置左下角邊框的圓角樣式。

border-bottom-right-radius ：設(shè)置右下角邊框的圓角樣式。

示例：

?

1.2 瀏覽器支持情況

最小版本支持：IE 9 、Chrome 4

?

1.3 引用資料

規(guī)范：https://www.w3.org/TR/css3-background/#the-border-radius

文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

?

2.?value值的格式和類型

border-*-radius屬性的值可分別設(shè)定水平半徑和垂直半徑；若省略垂直半徑，則垂直半徑默認(rèn)采用水平半徑的值。

而每個值，支持的單位有固定長度和百分比。若設(shè)置百分比格式，則水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度。

組合如下(以border-radius為例)：

1)?border-radius:20px; // 表示圓角的水平半徑和垂直半徑都為20px長度。

2)?border-radius:20px/40px; // 表示圓角的水平半徑的長度為20px，垂直半徑的長度為20px。

3) border-radius:20%; //?表示圓角的水平半徑和垂直半徑都為各自邊框長度的20%。

4)?border-radius:20%/30%;?//?表示圓角的水平半徑為邊框?qū)挾鹊?0%，垂直半徑都為邊框高度的20%。

5)?border-radius:20px/30%;?//?表示圓角的水平半徑長度20px，垂直半徑都為邊框高度的20%。

示例：

?

3.?border-radius 1~4個參數(shù)說明

border-radius可以一次性對四個角設(shè)置相同的值，也可以對4個角分別設(shè)置圓角樣式。

而秘訣就在于設(shè)定border-radius的參數(shù)個數(shù)。

首先看下CSS規(guī)范對border-radius的參數(shù)說明：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

可得知border-radius的參數(shù)個數(shù)范圍為1~4個，這里要注意點(diǎn)水平半徑和垂直半徑的分別使用時：在border-radius中先設(shè)置4個邊角的水平半徑再設(shè)置4個邊角的垂直半徑。

下面分別說明參數(shù)1~4個參數(shù)所代表的含義：

3.1 參數(shù)個數(shù)：1

說明：4個邊框的圓角樣式都采用這個設(shè)置。

示例：border-radius: 20px;?// 4個邊框圓角樣式都為20px

?

3.2 參數(shù)個數(shù)：2

說明：

　　第①參數(shù)：左上角和右下角邊框的圓角樣式。

　　第②參數(shù)：右上角和左下角邊框的圓角樣式。

示例：border-radius: 20px 40px;?//?左上角和右下角：20px；右上角和左下角：40px

?

3.3 參數(shù)個數(shù)：3

說明：

　　第①參數(shù)：左上角邊框的圓角樣式。

　　第②參數(shù)：右上角和左下角邊框的圓角樣式。

　　第③參數(shù)：右下角邊框的圓角樣式。

示例：border-radius:20px 40px 60px;?//?左上角：20px；右上角和左下角：40px；右下角：60px

?

3.4 參數(shù)個數(shù)：4

說明：

　　第①參數(shù)：左上角邊框的圓角樣式。

　　第②參數(shù)：右上角邊框的圓角樣式。

　　第③參數(shù)：右下角邊框的圓角樣式。

　　第④參數(shù)：左下角邊框的圓角樣式。

示例：border-radius:20px 40px 60px 80px;?//?左上角：20px；右上角：40px；右下角：60px；左下角：80px

?

4.在線示例

4.1 示例

style="width: 100%;" title="CSS3-1-border-radius" src="http://codepen.io/polk6/embed/LbNdMe/?height=300&theme-id=24805&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="300">

?

4.2 在線地址

地址：http://www.akmsg.com/WebDemo/CSS3-border-radius.html

?

End Web開發(fā)之路系列文章 菜單加載中...
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的CSS border-radius边框圆角的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。