CSS3圓角邊框的使用-遁地龍捲風

0.快速入門

border-radius:50px;

1.border-radius詳解

border-radius:50px;

上右下左，水平和垂直距離都是50px

border-radius:50%;

這裡的%號是已套用該css樣式元素的長度和寬度為基數的

border-radius:50%  30%  ;

上下，水平垂直是50% 左右，水平垂直是30%

border-radius:50%  30%  10%;

上,水平垂直是50%，左右，水平垂直是30%，下，水平垂直是10%

border-radius:10%  50% 30% 10%;

上，水平垂直都是10%。右，平垂直都是50%。下，水平垂直都是30%。左，水平垂直都是10%

/前面是水平的,/後面是垂直的

border-radius:50% / 30%  ;

上左下右,水平是50%，垂直是30%

border-radius:50% / 30%  10%;

上右下左，水平都是50%，上下垂直30%，左右垂直10%;

其餘的規則在用/前都舉例過，不一一敘述了

2.單獨的設定

border-top-left-radius:10%;

border-top-left-radius:10% 30%;

與top對應的bottom,與left對應的right