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 | 下方圆角 | - |