Radius圆角

通过_r[-*]样式类独立设置元素的圆角半径,支持定义圆角的大半径小和位置;其大小是以3px为基准的,例如_r-3表示3px*3。

前言

本框架定义了一组圆角类名,通过类名可以定义圆角的大小和位置。简单使用_r样式类即可实现3px的圆角边框。

  • 输出
  • HTML
  • 内容
  •                 
                    
                

倍数圆角

默认圆角大小为3px,圆角大小样式组包括_r-0_r-[1~10],_r-0表示没有圆角,_r-1表示是_r的1倍,_r-2表示是_r的2倍,其他类推。

  • 输出
  • HTML
  • 内容
    内容
    内容
    内容
  •                 
                    
                

相对圆角

提供另外一组圆角类名,写法:_r-[xxs~xxl],与基础数值相对应,例如_r-xxs对应rem-min_r-xxl对应rem-max

  • _r-xxs:4px
  • _r-xs:8px
  • _r-sm:14px
  • _r-md:22px
  • _r-lg:28px
  • _r-xl:38px
  • _r-xxl:48px
  • 输出
  • HTML
  • 内容
    内容
    内容
    内容
  •                 
                    
                

位置位置

默认圆角为分布四个角落,同时我们还提供四个边框位置,分别是_r-l,_r-r,_r-t,_r-b。

  • 输出
  • HTML
  • 内容
    内容
  •                 
                    
                

关联类名

不同类型的类名可叠加使用,例如_r-2 _r-l表示左侧6px的圆角。

类名 说明 举例
_r 默认3px圆角 <div class="_r"></div>
_r-0 无圆角,border-radius:0 -
_r-[1~10] _r圆角的1~10倍大小 -
_r-l 左侧圆角 -
_r-r 右侧圆角 -
_r-t 上方圆角 -
_r-b 下方圆角 -
_r-xxs 4px圆角 -
_r-xs 8px圆角 -
_r-sm 14px圆角 -
_r-md 22px圆角 -
_r-lg 28px圆角 -
_r-xl 38px圆角 -
_r-xxl 44px圆角 -