border-radius屬性

以下內容摘於百度經驗。

border-radius圓角邊框是CSS3的新屬性，以前網頁設計開發中要實現元素的圓角邊框，通常是用背景圖片來實現的。現在我們只需要給元素添加border-radius屬性即可。

一.兼容性

它是CSS3的新屬性，兼容IE9+，Firefox 4+、Chrome、Safari 5+ 以及 Opera瀏覽器，對於一些較低版本的瀏覽器，我們可以添加相應的瀏覽器前綴來兼容。

div {

width: 500px;

height: 300px;

border: 1px solid black;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

}

二.語法

語法：border-radius：length/persentage；

js語法：object.style.borderRadius="5px"它的屬性參數值表示有多種方式，下面就為大家一一介紹。

 

最常見的一種表現形式是一個值。如border-radius:6px;

它表示元素四個方向的圓角大小都是6px，即每個圓角的“水平半徑”和“垂直半半徑”都設置為6px；

1. 四個屬性值，分別表示左上角、右上角、右下角、左下角的圓角大小（順時針方向）

   border-radius：10px   20px   30px  40px;

   

2. 三個屬性值，第一個值表示左上角，第二個值表示右上角和左下角（對角），第三個值表示右下角。

   border-radius:10px   30px  60px; 

   

3. 兩個屬性值，第一個值表示左上角和右下角，第二個值表示右上角和左下角。

   border-radius:20px  40px;

   

4. 斜杠二組值：第一組值表示水平半徑，第二組值表示垂直半徑，每組值也可以同時設置1到4個值，規則與上面相同。

   border-radius:100px/40px;

   

border-radius:60px 60px 60px 60px/100px 100px 60px 60px;

CSS樣式：

.egg{

  width: 120px;

   height: 160px;

   background: #EC0465;

   border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

}

三.實際應用

1. 實心圓

   .circle{

     width: 120px;

      height: 120px;

      background: #EC0465;

      border-radius: 100%;

   }

   

2. 半圓

    

   .lf-self-circle {

      width: 60px;

      height: 120px;

      background: #EC0465;

      border-radius: 60px 0 0 60px;

   }

   

3. 扇形

   .quarter-botlf-cir {

      width: 60px;

      height: 60px;

      background: #EC0465;

      border-radius: 0 0 0 60px;

   }

   

4. 花瓣

   .flower {

      width: 120px;

      height: 120px;

      background: #EC0465;

      border-radius: 60px 60px 0 60px;

   }

   

5. 膠囊

   .level-capsule {

      width: 160px;

      height: 100px;

      border-radius: 50px;

      background: #EC0465;

   }

   

6. 橢圓

   .ty{

      width: 160px;

      height: 100px;

      background: #EC0465;

      border-radius: 80px/50px;

   }