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为同色浅色边框 -