border-radius

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 rounded-sm 和 rounded-md 等工具将不同的边框半径大小应用于元素：

¥Use utilities like rounded-sm and rounded-md to apply different border radius sizes to an element:

<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>

分别圆边(Rounding sides separately)

¥Rounding sides separately

使用 rounded-t-md 和 rounded-r-lg 等工具仅将元素的一侧圆化：

¥Use utilities like rounded-t-md and rounded-r-lg to only round one side of an element:

<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>

分别圆角(Rounding corners separately)

¥Rounding corners separately

使用 rounded-tr-md 和 rounded-tl-lg 等工具仅将元素的一个角变为圆角：

¥Use utilities like rounded-tr-md and rounded-tl-lg utilities to only round one corner of an element:

<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>

使用逻辑属性(Using logical properties)

¥Using logical properties

使用 rounded-s-md 和 rounded-se-xl 等工具使用 逻辑属性 设置边框半径，根据文本方向映射到适当的角：

¥Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, which map to the appropriate corners based on the text direction:

<div dir="ltr">
<div class="rounded-s-lg ..."></div>
</div>
<div dir="rtl">
<div class="rounded-s-lg ..."></div>
</div>

以下是 LTR 和 RTL 模式下所有可用的边框半径逻辑属性工具及其物理属性等效项。

¥Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.

要获得更多控制，你还可以使用 LTR 和 RTL 修饰符 根据当前文本方向有条件地应用特定样式。

¥For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

创建药丸按钮(Creating pill buttons)

¥Creating pill buttons

使用 rounded-full 工具创建药丸按钮：

¥Use the rounded-full utility to create pill buttons:

<button class="rounded-full ...">Save Changes</button>

删除边框半径(Removing the border radius)

¥Removing the border radius

使用 rounded-none 工具从元素中删除现有边框半径：

¥Use the rounded-none utility to remove an existing border radius from an element:

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

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

¥Using a custom value

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

<div class="rounded-[2vw] ...">
  <!-- ... -->
</div>

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

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

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

响应式设计(Responsive design)

¥Responsive design

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

<div class="rounded md:rounded-lg ...">
  <!-- ... -->
</div>

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

自定义主题(Customizing your theme)

¥Customizing your theme

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

@theme {
  --radius-5xl: 3rem; 
}

现在 rounded-5xl 工具可用于你的标记：

<div class="rounded-5xl">
  <!-- ... -->
</div>

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