文档博客展示柜Plus
  1. 边框
  2. 边框颜色

边框

边框颜色

用于控制元素边框颜色的工具类.

ClassStyles
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例

基本示例

使用像 border-rose-500 和 border-lime-100 的工具类来控制元素的边框颜色：

border-indigo-500

border-purple-500

border-sky-500

<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>

改变不透明度

使用颜色不透明度修饰符来控制元素边框颜色的不透明度：

border-indigo-500/100

border-indigo-500/75

border-indigo-500/50

<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>

单独的边

使用像 border-t-indigo-500 和 border-r-lime-100 的工具类来设置元素一侧的边框颜色：

border-t-indigo-500

border-r-indigo-500

border-b-indigo-500

border-l-indigo-500

<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>

水平和垂直边

使用像 border-x-indigo-500 和 border-y-lime-100 的工具类来同时设置元素两侧的边框颜色：

border-x-indigo-500

border-y-indigo-500

<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>

使用逻辑属性

使用像 border-s-indigo-500 和 border-e-lime-100 的工具类来设置 border-inline-start-color 和 border-inline-end-color 逻辑属性，这些属性根据文本方向映射到左或右边框：

从左到右

从右到左

<div dir="ltr">
  <div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
  <div class="border-s-indigo-500 ..."></div>
</div>

子元素之间的分隔符

使用像 divide-indigo-500 和 divide-lime-100 的工具类来控制子元素之间的边框颜色：

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

使用自定义值

Use the border-[<value>] syntax to set the 边框颜色 based on a completely custom value:

<div class="border-[#243c5a] ...">
  <!-- ... -->
</div>

For CSS variables, you can also use the border-(<custom-property>) syntax:

<div class="border-(--my-border) ...">
  <!-- ... -->
</div>

This is just a shorthand for border-[var(<custom-property>)] that adds the var() function for you automatically.

在焦点时应用

Prefix a border-color utility with a variant like focus:* to only apply the utility in that state:

<input class="border-2 border-gray-700 focus:border-pink-600 ..." />

Learn more about using variants in the variants documentation.

响应式设计

Prefix a border-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="border-blue-500 md:border-green-500 ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.

自定义主题

Use the --color-* theme variables to customize the color utilities in your project:

@theme {
  --color-regal-blue: #243c5a; 
}

Now the border-regal-blue utility can be used in your markup:

<div class="border-regal-blue">
  <!-- ... -->
</div>

Learn more about customizing your theme in the theme documentation.

目录

简中文档 - 沪ICP备2024070610号-3