Skip to content
On this page

边框使用

图鸟内置了一些边框样式,可以直接使用。显示边框可以使用 tn-border 来设置。

边框圆角

图鸟内置了两个圆角样式,分别是 tn-radiustn-round,分别对应圆角和圆形。

加粗边框

可以使用 tn-border-bold 来加粗边框。

虚线边框

可以使用 tn-border-dashed 来设置虚线边框。

指定方向显示边框

图鸟内置了 tn-border-toptn-border-righttn-border-bottomtn-border-left 四个类,分别对应上、右、下、左四个方向的边框。

隐藏指定方向的边框

图鸟内置了 tn-border-none-toptn-border-none-righttn-border-none-bottomtn-border-none-left 四个类,分别对应上、右、下、左四个方向的边框。

修改边框颜色

可以使用图鸟内置的颜色值来修改边框颜色。具体颜色可选值可以参考 颜色
在类型颜色值和内置颜色值后加上 _border 即可。

html
<div class="tn-border tn-type-primary_border"></div>
<div class="tn-border tn-red_border"></div>
<div class="tn-border tn-type-primary_border"></div>
<div class="tn-border tn-red_border"></div>

使用演示

Tuniao UI