Border边框
使用_b或_b-*表示独立的边框样式类(外轮廓),这些样式可以用在所有元素上面;边框样式支持边框位置,边框大小;_b[-*]都是solid实边。与outline不占用空间不同,本边框会占用空间;通常我们会配合border-box:box-sizing使用。
前言
本框架定义了一组边框类名,通过类名可以定义边框的厚度、位置、颜色、类型。简单使用_bd
样式类即可实现实心边框。
- 输出
- HTML
-
内容
-
边框厚度
默认边框厚度为1px,边框厚度样式组包括_bd-0、_bd-1、_bd-2、_bd-3和_bd-4,分别表示0~4px的厚度。
- 输出
- HTML
-
内容内容内容内容内容
-
边框类型
默认边框类型为solid实边,边框类型样式组包括_bd-solid
(实线)、_bd-dashed
(短横虚线)、_bd-dotted
(点虚线)。
- 输出
- HTML
-
内容内容内容
-
边框颜色
默认边框颜色为浅灰色,边框颜色样式组包括_prim
、_bd-error
、_bd-succ
、_bd-info
、_bd-warn
、_bd-issue
、_bd-text
、_bd-brief
、_bd-ignore
以及使用-lt
后缀的浅色。
- 输出
- HTML
-
内容内容内容内容内容内容
-
边框位置
默认边框为四周实边,同时我们还提供六个边框位置,分别是_bd-l,_bd-r,_bd-t,_bd-b,_bd-lr,_bd-tb。
- 输出
- HTML
-
内容内容
-
关联类名
不同类型的类名可叠加使用,例如_bd-2 _bd-l
表示左侧2px的实边。
类名 | 说明 | 举例 |
---|---|---|
_bd | 普通1px实心边框 | <div class="_bd"></div> |
_bd-0 | 无边框,border:0 | - |
_bd-1 | 1px边框,border-width:1px,效果同_bd | - |
_bd-2 | 2px边框,border-width:2px | - |
_bd-3 | 3px边框,border-width:3px | - |
_bd-4 | 4px边框,border-width:4px | - |
_bd-l | 左侧实边 | - |
_bd-r | 右侧实边 | - |
_bd-t | 上部实边 | - |
_bd-b | 下部实边 | - |
_bd-lr | 左右实边 | - |
_bd-tb | 上下实边 | - |
_bd-solid | 实心边框,效果同_bd | - |
_bd-dashed | 短横虚线边框 | - |
_bd-dotted | 小点虚线边框 | - |
_bd-prim | prim主题色边框,追加-lt为同色浅色边框 | - |
_bd-error | error主题色边框,追加-lt为同色浅色边框 | - |
_bd-succ | succ主题色边框,追加-lt为同色浅色边框 | - |
_bd-info | info主题色边框,追加-lt为同色浅色边框 | - |
_bd-warn | warn主题色边框,追加-lt为同色浅色边框 | - |
_bd-issue | issue主题色边框,追加-lt为同色浅色边框 | - |
_bd-text | text主题色边框,追加-lt为同色浅色边框 | - |
_bd-brief | brief主题色边框,追加-lt为同色浅色边框 | - |
_bd-ignore | ignore主题色边框,追加-lt为同色浅色边框 | - |