圆角

圆角配置

圆角能让界面元素更加具有亲和力，在 ZUI 中预设了一系列的圆角，具体如下：

.rounded-none

无圆角

--radius-none

--radius-none

border-radius

.rounded-sm

小圆角

--radius-sm

--radius-sm

border-radius

.rounded

默认圆角

--radius

--radius

border-radius

.rounded-md

中等圆角

--radius-md

--radius-md

border-radius

.rounded-lg

大圆角

--radius-lg

--radius-lg

border-radius

.rounded-xl

超大圆角

--radius-xl

--radius-xl

border-radius

.rounded-2xl

2x 超大圆角

--radius-2xl

--radius-2xl

border-radius

.rounded-3xl

3x 超大圆角

--radius-3xl

--radius-3xl

border-radius

.rounded-full

完整圆角

--radius-full

--radius-full

border-radius

使用圆角

通过 CSS 工具类

在 ZUI 中可以通过 CSS 工具类来设置圆角，详细用法参加 CSS 工具类 / 边框 / 边框圆角 文档。下面为一个简单的例子：

小圆角

大圆角

通过 CSS 变量

你可以直接在 CSS 中引用圆角相关的 CSS 变量来使用圆角，例如：

小圆角

大圆角

自定义圆角

通过修改圆角配置可以快速改变界面风格，例如在一个简单清晰的风格下，你可能需要移除所有圆角设置。在 ZUI 中提供了多种方式来自定义圆角配置。

覆盖 CSS 变量

最方便自定义圆角的方式是覆盖 CSS 变量。下面为一个例子：

:root {
  --radius-none:    0px;
  --radius-sm:      0.125rem;
  --radius-DEFAULT: 0.25rem;
  --radius-md:      0.375rem;
  --radius-lg:      0.5rem;
  --radius-xl:      0.75rem;
  --radius-2xl:     1rem;
  --radius-3xl:     1.5rem;
  --radius-full:    9999px;
}

自定义主题

可以通过定制主题来修改圆角设置，具体参见 主题 文档。