border-radius 詳解_border-radius使用詳解1 border-radius講解2border-radius執行個體1border-radius執行個體2Css3實作波浪效果3-靜态波紋

如今CSS3中的border-radius出現後，讓我們沒有那麼多的煩惱了，首先制作圓角圖檔的時間是省了，而且其還有多個優點：其一減少網站的維護的工作量，少了對圖檔的更新制作，代碼的替換等等;其二、提高網站的性能，少了對圖檔進行http的請求，網頁的載入速度将變快；其三增加視覺美觀性。既然border-radius有這麼多好處，我們就從他的文法，屬性和屬性值等方面來看其如何應用，又是如何制作圓角，還有就是除了制作圓角他還能制作什麼？有這麼多，那我們就開始吧：

一、文法：

border-radius ：initial| <length>{1,4} [/ <length>{1,4} ]?

二、取值：

<length>：

1.由浮點數字和機關辨別符組成的長度值。不可為負值。

2.initial ---去除邊角

3. 百分比 50%

三、說明：

border-radius是一種縮寫方法。如果“/”前後的值都存在，那麼“/”前面的值設定其水準半徑，“/”後面值設定其垂直半徑。如果沒有“/”，則水準和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設定的其主要會有下面幾種情形出現：

1、border-radius: [ <length>{1,4} ];

　　//這裡隻有一個值，那麼top-left、top-right、bottom-right、bottom-left四個值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ;

　　 //這裡設定兩個值，那麼top-left等于bottom-right，并且取第一個值；top-right等于bottom-left，并且取第二個值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];

　　//如果有三個值，其中第一個值是設定top-left;而第二個值是top-right和bottom-left并且他們會相等,第三個值是設定bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];

　　//如果有四個值，其中第一個值是設定top-left;而第二個值是top-right,第三個值bottom-right,第四個值是設定bottom-left

前面，我們主要看了border-radius的縮寫格式，其實border-radius和border屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這裡我規納一點，他們都是先Y軸在X軸，具體看下面：

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

這裡說一下，各角拆分出來取值方式：<length> <length>中第一個值是圓角水準半徑，第二個值是垂直半徑,如果第二個值省略，那麼其等于第一個值，這時這個角就是一個四分之一的圓角，如果任意一個值為0，那麼這個角就不是圓角。

border-radius 詳解_border-radius使用詳解1 border-radius講解2border-radius執行個體1border-radius執行個體2Css3實作波浪效果3-靜态波紋

執行個體（4個角同步）：

一個值4個角

.block{
            background: red;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            transition: all ease 1s;
        }

執行個體（對角設定）：

兩個值對角

.block {
            background: red;
            width: 200px;
            height: 200px;
            border-radius: 0 55.5px;
            transition: all ease 1s;
        }

執行個體（4個角單獨設定）：

4個值，上右下左

.block {
            background: red;
            width: 200px;
            height: 200px;
            border-radius:10px 30px 50px 80px;
            transition: all ease 1s;
        }

執行個體（8個角設定）：

HTML代碼：

<div class="demo"></div>

為了更好的看出效果，我們給這個demo添加一點樣式：

.demo {
  width: 150px;
  height: 80px;
  border: 2px solid #f36;
  background: #ccc;
}

注：如無特殊聲明，本文執行個體所有基本代碼格式如上所示，隻在該元素上添加border-radius屬性設定。

.demo {
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

這種寫法我們前面有提到過，“/”前是指圓角的水準半徑，而“/”後是指圓角的垂直半徑，他們兩都遵循TRBL的順序原則。為了能讓大家更清楚了解，我們把上面代碼換成如下：

.demo {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

四、相容性

IE8以及一下版本浏覽器不支援。

目前主流浏覽器都支援border-radius,并且符合 w3c标準，如果不考慮ie8和一下版本浏覽器，不需要考慮相容性。