Radius 圆角

使用说明

对标签使用ax-radius即可使用3px边框圆角。ax-radius将对区块的四角使用3px的圆角,可自定义区块圆角方向,分别如下:

  • ax-radius,四周使用3px的圆角。
  • ax-radius-top,上边使用3px的圆角。
  • ax-radius-bottom,底边使用3px的圆角。
  • ax-radius-left,左边使用3px的圆角。
  • ax-radius-right,右边使用3px的圆角。
四周3px的圆角(ax-radius)
上边3px的圆角(ax-radius-top)
底边3px的圆角(ax-radius-bottom)
左边3px的圆角(ax-radius-left)
右边3px的圆角(ax-radius-right)
                                <section class="demo-section-border ax-radius">四周3px的圆角(ax-radius)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-top">上边3px的圆角(ax-radius-top)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-bottom">底边3px的圆角(ax-radius-bottom)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-left">左边3px的圆角(ax-radius-left)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-right">右边3px的圆角(ax-radius-right)</section>
                        

尺寸

对标签使用ax-radius-*即可使用不同尺寸的边框圆角。本框架定了7种圆角尺寸,分别如下:

  • ax-radius/ax-radius-xxs,3px的圆角。
  • ax-radius-xs,6px的圆角。
  • ax-radius-sm,9px的圆角。
  • ax-radius-md,12px的圆角。
  • ax-radius-lg,18px的圆角。
  • ax-radius-xl,24px的圆角。
  • ax-radius-xxl,30px的圆角。
3px的圆角(ax-radius)
6px的圆角(ax-radius-xs)
9px的圆角(ax-radius-sm)
12px的圆角(ax-radius-md)
18px的圆角(ax-radius-lg)
24px的圆角(ax-radius-xl)
30px的圆角(ax-radius-xxl)
                                <section class="demo-section-border ax-radius">3px的圆角(ax-radius)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-md">6px的圆角(ax-radius-md)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-lg">9px的圆角(ax-radius-lg)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-xl">12px的圆角(ax-radius-xl)</section>
                                <div class="ax-break"></div>
                                <section class="demo-section-border ax-radius-xxl">15px的圆角(ax-radius-xxl)</section>