CSS3 border-radius邊框圓角

標籤：文本   rom   程式   form   情況   radius   ref   dom   order   

CSS3 border-radius邊框圓角http://www.cnblogs.com/polk6/p/6050818.html

在CSS3中提供了對邊框進行圓角設定的支援，可對邊框1~4個角進行圓角樣式設定。

目錄

1. 介紹

2. value值的格式和類型

3. border-radius 1~4個參數說明

4. 線上樣本

 

1. 介紹1.1 圓角屬性

CSS3提供了5種圓角屬性：

border-radius ：同時設定4個邊框的圓角樣式。

border-top-left-radius ：設定左上方邊框的圓角樣式。

border-top-right-radius ：設定右上方邊框的圓角樣式。

border-bottom-left-radius ：設定左下角邊框的圓角樣式。

border-bottom-right-radius ：設定右下角邊框的圓角樣式。

樣本：

1.2 瀏覽器支援情況

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

 

1.3 引用資料

規範：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屬性的值可分別設定水平半徑和垂直半徑；若省略垂直半徑，則垂直半徑預設採用水平半徑的值。

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

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

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

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

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

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

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

樣本：

 

3. border-radius 1~4個參數說明

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

而秘訣就在於設定border-radius的參數個數。

首先看下CSS規範對border-radius的參數說明：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

可得知border-radius的參數個數範圍為1~4個，這裡要注意點水平半徑和垂直半徑的分別使用時：在border-radius中先設定4個邊角的水平半徑再設定4個邊角的垂直半徑。

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

3.1 參數個數：1

說明：4個邊框的圓角樣式都採用這個設定。

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

3.2 參數個數：2

說明：

　　第①參數：左上方和右下角邊框的圓角樣式。

　　第②參數：右上方和左下角邊框的圓角樣式。

樣本：border-radius: 20px 40px; // 左上方和右下角：20px；右上方和左下角：40px

 

3.3 參數個數：3

說明：

　　第①參數：左上方邊框的圓角樣式。

　　第②參數：右上方和左下角邊框的圓角樣式。

　　第③參數：右下角邊框的圓角樣式。

樣本：border-radius:20px 40px 60px; // 左上方：20px；右上方和左下角：40px；右下角：60px

 

3.4 參數個數：4

說明：

　　第①參數：左上方邊框的圓角樣式。

　　第②參數：右上方邊框的圓角樣式。

　　第③參數：右下角邊框的圓角樣式。

　　第④參數：左下角邊框的圓角樣式。

樣本：border-radius:20px 40px 60px 80px; // 左上方：20px；右上方：40px；右下角：60px；左下角：80px

4.線上樣本4.1 樣本

 

 

4.2 線上地址

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

 

==================================系列文章==========================================

本篇文章：8.1 CSS3 border-radius邊框圓角

Web開發之路系列文章

Web開發之路系列文章

1.HTML

　　1.1 HTML頁面原始碼布局介紹

　　1.2 HTML基礎控制項介紹

　　1.3 iframe 和 frameset 的區別

　　1.4 name、id、class 的區別

　　1.5 table、form表單標籤的介紹以及get和post提交方式

　　1.6 HTML kbd鍵盤元素

2.CSS 層疊樣式表

　　2.1 CSS 選取器及各樣式引用方式

　　2.2 CSS HTML元素布局及Display屬性

　　2.3 CSS Float 浮動屬性

　　2.4 CSS Position 定位屬性

3.JavaScript介紹

　　3.1 JavaScript var關鍵字、變數的狀態、異常處理、命名規範等介紹

　　3.2 JavaScript function函數種類

　　3.3 JavaScript Array對象

　　3.4 JavaScript Date對象

　　3.5 JavaScript Math和Number對象

　　3.6 JavaScript String對象

　　3.7 JavaScript Object對象

　　3.8 JavaScript 自訂對象

　　3.9 JavaScript 對象屬性介紹

　　3.10 JavaScript 開發規範

4.BOM

　　4.1 HTML BOM Browser對象

　　4.2 HTML 擷取螢幕、瀏覽器、頁面的高度寬度

　　4.3 HTML URL位址解析

5.DOM

　　5.1 HTML DOM 介紹

　　5.2 HTML DOM 對象

　　5.3 HTML 事件(一) 事件的介紹

　　5.4 HTML 事件(二) 事件的註冊與登出

　　5.5 HTML 事件(三) 事件流與事件委託

　　5.6 HTML 事件(四) 類比事件操作

6.HTML5

　　6.1 HTML5 介紹

 　  6.2 HTML5 語義元素(一)頁面結構

 　  6.3 HTML5 語義元素(二)常值內容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控制項 

　　6.6 HTML5 sessionStorage會話儲存

　　6.7 HTML5 localStorage本機存放區 

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介紹

　　7.2 ExtJS 4.2 第一個程式

　　7.3 ExtJS 4.2 組件介紹

　　7.4 ExtJS 4.2 組件的尋找方式

　　7.5 ExtJS 4.2 業務開發(一)首頁搭建

　　7.6 ExtJS 4.2 業務開發(二)資料展示和查詢

　　7.7 ExtJS 4.2 業務開發(三)資料添加和修改

　　7.8 ExtJS 4.2 Grid組件的儲存格合并

　　7.9 ExtJS 4.2 Date組件擴充：添加清除按鈕

　　7.10 ExtJS 4.2 評分組件

8.CSS 3

　　8.1 CSS3 border-radius邊框圓角

 

 

只是記錄了自己在學習、使用Web前端內容時的心得和碰到的問題。

參考文獻：

1）http://www.w3school.com.cn/

2）《JavaScript權威指南(第六版)》

 轉自http://www.cnblogs.com/polk6/archive/2016/11/14/6050818.html

 

 

CSS3 border-radius邊框圓角