CSS3圓角 border-radius
HTML5學堂：圓角是用一段與角的兩邊相切的圓弧替換原來的直角。在原有網頁當中，如果需要實現圓角效果，可以使用背景圖的實現，但是這樣會造成背景圖大小和數量的增加，從而使得伺服器請求次數和需要載入的程式碼量增加，降低載入速度。
CSS3圓角的優勢：
CSS3提供了更簡便快捷的屬性border-radius之後，實現邊框圓角就非常的簡單了，而且多了很多個優點，一方面減少了圖片的HTTP的請求，一方面提高了網站的效能。還有一方面就是減少程式碼，提高了維護性。既然CSS3圓角提供了那麼多的好處，我們看看CSS3的border-radius是如何實現圓角的。我們先來看看基本語法。
基本語法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
語法分析：
語法中符號的含義：
length的取值範圍不為負數。
“[ ]”代表“可選”
“|”代表“或”
“{}”裡的數字代表屬性值的數量範圍
“？”代表“一次”
“*”表示可出現多次
圓角書寫方式：
在實現圓角之前，我們先來看幾個效果，接著看CSS3圓角是如何實現的？
效果一： 扇形
結構程式碼：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> h5course </title> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <div class=" h5course "></div> </body> </html>
CSS樣式：
. h5course {
border: 200px solid transparent;
width: 0;
border-radius: 200px;
border-top-color: red;
}效果如下：
效果二：橢圓形
結構程式碼：
<div class="h5course"></div>CSS樣式：
html { background: #000; } .h5course { width: 400px; height: 200px; border: 2px solid #f36; border-radius: 50% / 50%; background: #ccc; line-height: 200px; text-align: center; font-size: 25px; font-family: 微軟雅黑" }
效果如下：
如上例子的圓角是如何實現的呢？之前大家回想一下，margin和padding的書寫順序。是不是四種寫法，
1. margin一個值,表示盒模型的margin的上，下，左，右四個方向值
2. margin兩個值,表示的是margin第一個值為margin的上,下方向值。第二個值為margin的左,右方向值。
3. margin三個值，表示的是margin第一個值為margin的上方向值。第二個值為margin的左,右方向值。第三個值為margin的下方向值.
4. Margin四個值，表示的是margin第一個值為margin的上方向值。第二個值為margin的右方向值。第三個值為margin的下方向值。第四個值為margin的左方向值.
而border-radius的書寫順序也是和margin類似，分別表示左上角、右上角、右下角、左下角。“/”前是指圓角的水平半徑，而“/”後是指圓角的垂直半徑，他們兩邊都遵循（margin四個值）的順序原則。
1.只有一個值，那麼左上角、右上角、右下角、左下角四個值相等。
2.有兩個值，那麼左上角等於右下角，並且取第一個值；右上角等於左下角，並且取第二個值
3.有三個值，其中第一個值是設定左上角，而第二個值是右上角、左下角，並且他們會相等,第三個值是設定右下角。
4.有四個值，其中第一個值是設定左上角。而第二個值是右上角第三個值右下角，第四個值是設定左下角。
我們再來看一個例項，一步一步實現圓角效果：
<div class="h5course"></div>為了更好的看出效果，我們給這個demo新增一點樣式：
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}這時候在該元素上新增border-radius屬性設定。
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
圓角相容性：
border-radius只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome10.0+、Opera10.5+、IE9+支援border-radius標準語法格式，對於老版的瀏覽器，border-radius需要根據不同的瀏覽器核心新增不同的字首，比說Mozilla核心需要加上“-moz”，而Webkit核心需要加上“-webkit”等，那麼我為了能相容各大核心的老版瀏覽器，一般加這些核心字首的。
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
-webkit- border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
-moz - border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}歡迎溝通交流~HTML5學堂