Borders
单个元素边框
边框的圆角及宽度都可以对所有的边、角进行设置
也可以对相对的边框设置宽度颜色，相邻的角设置弧度
也可以对单个边框设置宽度颜色，单个角设置弧度
圆角、宽度及颜色
- 圆角弧度的大小
rounded-{size?}
默认值为 4px
none: 0px, sm:2px, md:6px, lg:8px, xl:12px, 2xl:16px, 3xl:24px, full:9999px
使用none取消圆角, full为完整的圆角
1<div class="rounded"></div>
2<!-- 设置自定义的值 -->
3<div class="rounded-[20px]"></div>
- 边框宽度的大小
border-{size?}
默认值为: 1px
0:0px, 2:2px, 4:4px, 8:8px
1<div class="border-2"></div>
2<!-- 设置自定义的值 -->
3<div class="border-[3px]"></div>
- 边框的颜色
border-{color} color:色系 gray:灰, red:红, orange:橙, green:绿…
inherit:?, transparent:透明, black:黑色, white:白色
border-{color}-{size} 值越大色系越深 ,{50|100|200|300|400|500|600|700|800|900|950}
border-{color}-{size/opacity} 通过设定opacity来调节颜色的透明度, 值越小越透明，5的倍数5…95
1<div class="border-lime-400/70"></div>
2<!-- 自定义颜色 -->
3<div class="border-[#243c5a]"></div>
- 邻角的位置
rounded-{t|r|b|l}-{size?}
t:上, r:右, b:下, l:左
1<div class="rounded-t-lg"></div>
2<!-- 设置自定义的值 -->
3<div class="rounded-t-[20px]"></div>
- 对边的位置
border-{x|y}-{size?}
x: 水平位置, y: 垂直位置
1<div class="border-x"></div>
- 对边的颜色
border-{x|y}-{color}
x: 水平位置, y: 垂直位置
取决于对边的位置
1<div class="border-x-amber-400"></div>
- 单个角的位置
rounded-{tl|tr|br|bl}-{size?}
tl:左上, tr:右上, br:右下, bl:坐下
1<div class="rounded-tl-md"></div>
2<!-- 设置自定义的值 -->
3<div class="rounded-tl-[20px]"></div>
- 单条边框的位置
border-{t|r|b|l}-{size?}
t:上, r:右, b:下, l:左
1<div class="border-r"></div>
- 单条边框的颜色
border-{t|r|b|l}-{color}
t:上, r:右, b:下, l:左
取决于边框的位置
1<div class="border-r-amber-400"></div>
- 边框的样式
border-{style}
solid:单线, dashed:虚线, dotted:点线, double:双线, hidden:隐藏, none:无
取决于边框的位置
注意 设置为 double 时 边框的宽度大于 3px 样式才会展示
1<div class="border-solid"></div>
多个元素边框
可以为内部子元素设置边框的宽度、颜色及样式
⚠️内部子元素之间没有间距
⚠️子元素最好填充满整个矩阵
宽度、颜色及样式
- 宽度
divide-{x|y}-{size?}
x:水平方向的边框 y:垂直方向的边距
size default:1px, 0:0px, 2:2px, 4:4px 8:8px
divide-{x|y}-reverse 边框位置反序排列
1<div class="grid grid-cols-3 divide-x">
2 <div>01</div>
3 <div>02</div>
4 <div>03</div>
5</div>
6<!-- 自定义宽度 -->
7<div class="grid grid-cols-3 divide-x-[3px]">
8 ...
- 颜色
取决于分组边框的位置
divide-{color}-{size/opacity}
相关参数参考 边框样式
1<div class="grid grid-cols-3 divide-x divide-cyan-400">
2 <div>01</div>
3 <div>02</div>
4 <div>03</div>
5</div>
- 样式
取决于分组边框的位置
divide-{style}
solid:单线, dashed:虚线, dotted:点线, double:双线, hidden:隐藏, none:无
注意 设置为 double 时 边框的宽度大于 3px 样式才会展示