Radius圆角

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

前言

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

  • 输出
  • HTML
  • 内容
  •                 
                    
                

圆角大小

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

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

位置位置

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

  • 输出
  • HTML
  • 内容
    内容
  •                 
                    
                

关联类名

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

类名 说明 举例
_r 默认3px圆角 <div class="_r"></div>
_r-0 无圆角,border-radius:0 -
_r-[x1~x10] _r圆角的1~10倍大小 -
_r-l 左侧圆角 -
_r-r 右侧圆角 -
_r-t 上方圆角 -
_r-b 下方圆角 -