CSS3:CSS3 圓角
阿新 • • 發佈:2018-04-25
w3cschool png oat -s 代碼 返回頂部 瀏覽器支持 safari right
1、
2、
1、
http://www.runoob.com/css3/css3-border-radius.html
2、
ylbtech-CSS3:CSS3 圓角 |
1.返回頂部 |
CSS3 圓角
CSS3 圓角
使用 CSS3 border-radius 屬性,你可以給任何元素制作 "圓角"。
CSS3 圓角制作器
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
-webkit- 或 -moz- 前面的數字表示支持該前綴的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius 屬性
使用 CSS3 border-radius 屬性,你可以給任何元素制作 "圓角"。
以下為三個實例:
1. 指定背景顏色的元素圓角:
圓角!
2. 指定邊框的元素圓角:
圓角!
3. 指定背景圖片的元素圓角:
圓角!
代碼如下:
實例
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height嘗試一下 ?: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
CSS3 border-radius - 指定每個圓角
如果你在 border-radius 屬性中只指定一個值,那麽將生成 4 個 圓角。
但是,如果你要在四個角上一一指定,可以使用以下規則:
- 四個值: 第一個值為左上角,第二個值為右上角,第三個值為右下角,第四個值為左下角。
- 三個值: 第一個值為左上角, 第二個值為右上角和左下角,第三個值為右下角
- 兩個值: 第一個值為左上角與右下角,第二個值為右上角與左下角
- 一個值: 四個圓角值相同
以下為三個實例:
1. 四個值 - border-radius: 15px 50px 30px 5px:
2. 三個值 - border-radius: 15px 50px 30px:
3. 兩個值 - border-radius: 15px 50px:
以下為源代碼:
實例
#rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; }嘗試一下 ?
您還可以創建橢圓邊角:
實例
#rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; }嘗試一下 ?
CSS3 圓角屬性
屬性 | 描述 |
---|---|
border-radius | 所有四個邊角 border-*-*-radius 屬性的縮寫 |
border-top-left-radius | 定義了左上角的弧度 |
border-top-right-radius | 定義了右上角的弧度 |
border-bottom-right-radius | 定義了右下角的弧度 |
border-bottom-left-radius | 定義了左下角的弧度 |
2.返回頂部 |
3.返回頂部 |
4.返回頂部 |
5.返回頂部 |
6.返回頂部 |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。 |
CSS3:CSS3 圓角