border-radius屬性的使用方法：

1.水平和垂直半徑一樣：

1. border-radius只設置一個值：四個圓角相同
2. border-radius設置兩個值：斜對角相同
3. border-radius設置三個值：top-right和bottom-left相同
4. border-radius設置四個值：各自取值

2.單獨設置水平和垂直半徑：用”/”來區別：水平半徑/垂直半徑

.border-radius{
  width:350px;height:100px;
  border:10px solid orange;
  border-radius:60px 40px 30px 20px/30px 20px 10px 5px;
}

效果圖：

註意： 分開設置元素各個頂角的圓角的水平和垂直半徑圓角效果時，是不需要’/’的，加上反而是錯誤的！！！

3.制作單個圓角邊框

border-radius:30px 0 0 0;

4.特殊應用：

1. border-radius：內半徑=外半徑-邊框寬度！內半徑為兩者的差值，差值越大，圓角幅度也越大，反之圓角幅度越小。當border邊寬越大時候，內圓角接近於直角，不具有圓角效果。
2. 不同寬度的相鄰邊，內角會從寬的邊平滑過渡到窄的一邊，其中一條邊可以為0，相鄰轉角由大向小轉。

//內半徑=外半徑-邊寬，邊寬過大則內圓角為直角
.border-radius2{
  width:350px;height:100px;
  border:30px solid orange;
  border-radius:25px;
}
//不同寬邊的平滑過渡效果
.border-radius3{
  width:350px;height:100px;
  border:3px solid red;
  border-width: 20px 5px 30px 60px;
  border-radius:100px;
}

特殊圓形的制作：

1.圓形：

制作技巧：元素的寬度和高度相同，圓角半徑為寬或高的一半或直接設置50%！

.round{
  width:100px;height:100px;
  background:red;
  border-radius:50%;
}

2.半圓：

制作技巧：元素的寬度和高度相配合（多為2倍關系），圓角半徑為短邊的值，圓角半徑設置位置不同。分上、右、下、左半圓

//上半圓
.halfCircle{
  width:200px;height:100px;
  background-color: blue;
  border-radius:100px 100px 0 0 ;
}
//右半圓
.halfCircle2{
  width:100px;height:200px;
  background-color: blue;
  border-radius:0 100px 100px 0 ;
}
//...

3.扇形：

制作技巧：其實就是制作四分之一圓，遵循”三同，一不同“原則，寬度，高度，圓角半徑相同，圓角位置不同。分為左上、右上、右下、左下。

.quarterCircle{
  width:100px;height: 100px;
  background: orange;
  border-radius: 100px 0 0 0;/*圓角位置不同*/
}

4.橢圓：

制作技巧：設置水平和垂直半徑，例如水平方向的橢圓：寬度=高度x2，水平半徑=寬度，垂直半徑=高度！垂直方向的橢圓則相反

.hor{
  width:200px;height:100px;
  background: green;
  border-radius: 200px/100px;
}

可以配合元素的其他屬性實現不同的圖形效果，適應項目需求。border-radius瀏覽器兼容性較好，IE8以下不支持，but,who care about it？…

CSS3圓角邊框