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

2021-10-07 17:49:57 字數 845 閱讀 1819

0.快速入門

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

CSS3圓角邊框

本文介紹border radius的使用 應用 特殊圓形的製作等!1.水平和垂直半徑一樣 border radius只設定乙個值 四個圓角相同 border radius設定兩個值 斜對角相同 border radius設定三個值 top right和bottom left相同 border rad...

CSS3圓角邊框

圓角 border radius border radius 左上 右上 右下 左下 即border radius 10px 20px 30px 40px 的結果為 左上 border top left radius 10px 等價於border radius 10px 0 0 0 右上 borde...

CSS3 圓角邊框

css3是css2的公升級版本,3只是版本號,它在css2.1的基礎上增加了很多強大的新功能。目前主流瀏覽器chrome safari firefox opera 甚至360都已經支援了css3大部分功能了,ie10以後也開始全面支援css3了。在編寫css3樣式時,不同的瀏覽器可能需要不同的字首。...