首頁 > web前端 > html教學 > CSS3圓角邊框的使用-遁地龍捲風

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

WBOY
發布: 2016-08-20 08:47:52
原創
1679 人瀏覽過

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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板