Border 边框

对应文件

@vusui/css/lib/border.cssopen in new window

基础用法

使用 vus-border-(0~20) 类可设置元素的边框大小。

vus-border-1

vus-border-2

vus-border-3

vus-border-20

<div class="vus-border-1"></div>
<div class="vus-border-2"></div>
<div class="vus-border-20"></div>

指定位置

指定边框位置，可随意多个混合。

样式名称	描述
vus-border-l-(0~20)	border-left-width (左边边框)
vus-border-t-(0~20)	border-top-width (顶部边框)
vus-border-r-(0~20)	border-right-width (右边边框)
vus-border-b-(0~20)	border-bottom-width (底部边框)

vus-border-l-1

vus-border-r-2

vus-border-t-3

vus-border-b-5

vus-border-t-4 vus-border-b-4

vus-border-l-1 vus-border-b-1

<div class="vus-border-l-1"></div>
<div class="vus-border-r-2"></div>
<div class="vus-border-t-3"></div>
<div class="vus-border-b-4"></div>
<div class="vus-border-t-1 vus-border-b-10"></div>
<div class="vus-border-l-10 vus-border-r-10"></div>
<div class="vus-border-l-10 vus-border-t-10"></div>

指定类型

添加指定类，改变边框类型

样式名称	描述
vus-border-solid	实线类型
vus-border-dashed	虚线类型
vus-border-dotted	圆点虚线类型

vus-border-solid

vus-border-dashed

vus-border-dotted

<div class="vus-border-1 vus-border-solid"></div>
<div class="vus-border-1 vus-border-dashed"></div>
<div class="vus-border-1 vus-border-dotted"></div>

设置颜色

如需设置边框颜色请查看【Color 颜色】说明文档。

响应式方案

响应式预设了四个响应尺寸：

分辨率	≥567px	≥768px	≥1024px	≥1280px
基础	vus-border-xs-*	vus-border-sm-*	vus-border-md-*	vus-border-lg-*
Left	vus-border-l-xs-*	vus-border-l-sm-*	vus-border-l-md-*	vus-border-l-lg-*
Top	vus-border-t-xs-*	vus-border-t-sm-*	vus-border-t-md-*	vus-border-t-lg-*
Right	vus-border-r-xs-*	vus-border-r-sm-*	vus-border-r-md-*	vus-border-r-lg-*
Bottom	vus-border-b-xs-*	vus-border-b-sm-*	vus-border-b-md-*	vus-border-b-lg-*

<div
  class="vus-border-1 vus-border-xs-2 vus-border-sm-3 vus-border-md-4 vus-border-lg-5"
></div>
<div
  class="vus-border-l-1 vus-border-l-xs-2 vus-border-l-sm-3 vus-border-l-md-4 vus-border-l-lg-5"
></div>
<div
  class="vus-border-r-1 vus-border-r-xs-2 vus-border-r-sm-3 vus-border-r-md-4 vus-border-r-lg-5"
></div>

# Border 边框

# 基础用法

# 指定位置

# 指定类型