边框

为元素添加或者移除边框效果。

基础用法

使用.vus-border-(0~10)类。

vus-border-1
vus-border-2
vus-border-3
vus-border-5
vus-border-10
<div class="vus-border-1"></div>
<div class="vus-border-2"></div>
<div class="vus-border-3"></div>
<div class="vus-border-5"></div>
<div class="vus-border-10"></div>

边框位置

  • 指定边框位置:
  • .vus-border-top-(0~10):顶部边框。
  • .vus-border-right-(0~10):右部边框。
  • .vus-border-bottom-(0~10):底部边框。
  • .vus-border-left-(0~10):左部边框。
vus-border-top-5
vus-border-right-10
vus-border-bottom-4
vus-border-left-6
<div class="vus-border-top-5"></div>
<div class="vus-border-right-10"></div>
<div class="vus-border-bottom-4"></div>
<div class="vus-border-left-6"></div>

边框类型

  • 添加指定类改变边框类型:
  • .vus-border-solid:实线类型。
  • .vus-border-dashed:虚线类型。
  • .vus-border-dotted:圆点虚线类型。
  • .vus-border-double:双实线类型。
vus-border-solid
vus-border-dashed
vus-border-dotted
vus-border-double
vus-border-dashed
vus-border-dotted
vus-border-double
<div class="vus-border-5 vus-border-solid"></div>
<div class="vus-border-10 vus-border-dashed"></div>
<div class="vus-border-4 vus-border-dotted"></div>
<div class="vus-border-6 vus-border-double"></div>
<div class="vus-border-top-4 vus-border-dotted"></div>
<div class="vus-border-bottom-6 vus-border-dashed"></div>

边框颜色

请参阅颜色中的边框颜色API文档。

vus-border--primary
vus-border--success
vus-border--danger
<div class="vus-border-2 vus-border--primary"></div>
<div class="vus-border-4 vus-border--success"></div>
<div class="vus-border-6 vus-border--danger"></div>