·您當前的位置:主頁 > 技術教程 > Html5技術 >

                          [CSS3]border-radius圓角用法

                          時間:2019-01-25 16:08w3school
                          必須出現一個值,可長度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行

                          w3c屬性值詳解:
                          [ <length> | <percentage> ]:必須出現一個值,可長度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
                          {1,2}: 表示他們的值最小可以重復一次,最大可重復兩次。假如只有一個值,表示圓角,那么它的水平距離和垂直距離相等,即第二個值復制第一個值;假如是兩個值,那么確定一個橢圓角,第一個值橢圓的水平半徑,第二值為橢圓的垂直半徑,說起來有點拗口,直接上圖:

                          只有1個值,如:border-top-left-radius:50px,表示半徑為50px圓,如圖:
                          左上角
                          標注錯誤了,盒子尺寸為:300*100

                          假如有兩個值,如:border-top-left-radius:50px 100px,表示水平半徑為50px,垂直半徑為100px的橢圓,如圖:
                          左上角

                          同理 border-top-right-radius(右上圓角半徑), border-bottom-right-radius (右下圓角半徑),border-bottom-left-radius(左下圓角半徑),也是如此。你只要記住當某個角為一個值時,確定是一個圓,當使用兩個值確定一個橢圓。

                          熱門文章推薦

                          請稍候...