Lzh on GitHub

border-style

控制元素边框样式的工具类。

快速参考

类别样式
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;
divide-solid& > :not(:last-child) { border-style: solid; }
divide-dashed& > :not(:last-child) { border-style: dashed; }
divide-dotted& > :not(:last-child) { border-style: dotted; }
divide-double& > :not(:last-child) { border-style: double; }
divide-hidden& > :not(:last-child) { border-style: hidden; }
divide-none& > :not(:last-child) { border-style: none; }

示例

基本示例

使用 border-solid 和 border-dotted 等工具类来控制元素的边框样式：

border-solid

border-dashed

border-dotted

border-double

<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>

移除边框

使用 border-none 工具类来移除元素上已有的边框：

<button class="border-none ...">Save Changes</button>

这最常用于移除在较小断点处应用的边框样式。

设置分隔线样式

使用 divide-dashed 和 divide-dotted 等工具类来控制子元素之间的边框样式：

01
02
03
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

响应式设计

为 border-style 工具类添加 md: 等断点变体前缀，以仅在 中等 屏幕尺寸及以上应用该工具类：

<div class="border-solid md:border-dotted ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。