Skip to content
On this page

边框使用 ​

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

边框圆角 ​

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

加粗边框 ​

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

虚线边框 ​

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

指定方向显示边框 ​

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

隐藏指定方向的边框 ​

图鸟内置了 tn-border-none-top、tn-border-none-right、tn-border-none-bottom、tn-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>

使用演示 ​