CSS3圓角邊框

標籤：平滑   需求   who   使用方法   一個   gre   height   about   注意   

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圓角邊框