边框使用
图鸟内置了一些边框样式,可以直接使用。显示边框可以使用 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>