Border边框
使用_bd或_bd-*表示独立的边框样式类(外轮廓),这些样式可以用在所有元素上面;边框样式支持边框位置,边框大小;_bd[-*]都是solid实边。与outline不占用空间不同,本边框会占用空间;通常我们会配合border-box:box-sizing使用。
前言
本框架定义了一组边框类名,通过类名可以定义边框的厚度、位置、颜色、类型。简单使用_bd样式类即可实现实心边框。
- 输出
- HTML
-
内容
-
边框厚度
默认边框厚度为1px,边框厚度样式组包括_bd-0、_bd-1到_bd-10,分别表示0~10px的厚度。
- 输出
- 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-caption以及使用-lt后缀的浅色。
- 输出
- HTML
-
内容内容内容内容内容内容
-
边框位置
默认边框为四周实边,同时我们还提供六个边框位置,分别是_bd-s,_bd-e,_bd-t,_bd-b,_bd-se,_bd-tb。
- 输出
- HTML
-
内容内容
-
关联类名
不同类型的类名可叠加使用,例如_bd-2 _bd-s表示左侧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~10] | 4px~10px的边框 | - |
| _bd-s | 左侧实边 | - |
| _bd-e | 右侧实边 | - |
| _bd-t | 上部实边 | - |
| _bd-b | 下部实边 | - |
| _bd-se | 左右实边 | - |
| _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-caption | caption主题色边框,追加-lt为同色浅色边框 | - |

