开发文档Nodejs.cn 旗下网站
  1. 边框
  2. border-color

边框

border-color

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

类样式
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) */

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like border-rose-500 and border-lime-100 to control the border color of an element:

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>

改变透明度(Changing the opacity)

¥Changing the opacity

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

¥Use the color opacity modifier to control the opacity of an element's border color:

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>

个别面(Individual sides)

¥Individual sides

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

¥Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element:

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>

水平端和垂直端(Horizontal and vertical sides)

¥Horizontal and vertical sides

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

¥Use utilities like border-x-indigo-500 and border-y-lime-100 to set the border color on two sides of an element at the same time:

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>

使用逻辑属性(Using logical properties)

¥Using logical properties

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

¥Use utilities like border-s-indigo-500 and border-e-lime-100 to set the border-inline-start-color and border-inline-end-color logical properties, which map to either the left or right border based on the text direction:

Left-to-right

Right-to-left

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

子项之间的分隔符(Divider between children)

¥Divider between children

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

¥Use utilities like divide-indigo-500 and divide-lime-100 to control the border color between child elements:

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>

使用自定义值(Using a custom value)

¥Using a custom value

使用 border-[<value>] 语法 根据完全自定义的值设置 border color：

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

对于 CSS 变量，还可以使用 border-(<custom-property>) 语法：

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

这只是简写，用于 border-[var(<custom-property>)] 它会自动为你添加 var() 函数。

聚焦时应用(Applying on focus)

¥Applying on focus

在 border-color 工具前面加上一个变体，例如 focus:*，以便仅在该状态下应用该工具：

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

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

¥Responsive design

在 border-color 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在 border-regal-blue 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。

目录

TailwindCSS v4.0 中文网 - 粤ICP备13048890号