---
title: 圆角与细线 Radius & Hairline
url: https://ui.zhaozimin.com/foundations/radius/
markdown: https://ui.zhaozimin.com/foundations/radius.md
group: 基础
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/tokens.css  # https://ui.zhaozimin.com/src/system/styles/v4/tokens.css
  - src/system/styles/v4/SPACING.md  # https://ui.zhaozimin.com/src/system/styles/v4/SPACING.md
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 圆角与细线 Radius & Hairline

> 圆角五档，同一层级用同一档：外层卡片 16，卡内嵌套 12。细线三档，同一用途用同一档。

## 圆角梯

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-r-1` | `4px` |  |
| `--zzm-r-2` | `8px` |  |
| `--zzm-r-3` | `12px` |  |
| `--zzm-r-4` | `16px` |  |
| `--zzm-r-pill` | `999px` |  |

另有 `20 / 24` 给大容器，`50%` 给圆形。高度 ≤ 8px 的进度条、微点允许 1–2px 端帽圆角。此前散布的 3/5/7/9/10/11/14/18 已按 ≤5→4、6–9→8、10–13→12、14–17→16、18–22→20 归一。

## 嵌套律

### 样张 · 卡 16 · 内嵌 12

React：

```jsx
export function Nesting() {
  return (
    <div style={{ width: 320, padding: 16, borderRadius: 16, background: '#FFFFFF', border: '1px solid rgba(0,0,0,.09)' }}>
      <div style={{ aspectRatio: '16/9', borderRadius: 12, background: '#131316' }} />
      <div style={{ marginTop: 12, fontSize: 14, fontWeight: 600, lineHeight: '20px' }}>外层 16，内嵌 12</div>
      <div style={{ fontSize: 12.5, lineHeight: '20px', color: '#8B8B85' }}>内距 16 − 边框 1 ≈ 圆角差 4</div>
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div
  style="
    width: 320px;
    padding: 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
  "
>
  <div style="aspect-ratio: 16/9; border-radius: 12px; background: #131316"></div>
  <div style="margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 20px">
    外层 16，内嵌 12
  </div>
  <div style="font-size: 12.5px; line-height: 20px; color: #8b8b85">
    内距 16 − 边框 1 ≈ 圆角差 4
  </div>
</div>
```

## 细线三档

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-hairline` | `rgba(0, 0, 0, 0.07)` |  |
| `--zzm-hairline-2` | `rgba(0, 0, 0, 0.09)` |  |
| `--zzm-hairline-strong` | `rgba(0, 0, 0, 0.14)` |  |

此前 .05/.06/.08/.1/.12/.13/.15/.16 散布 12 档，已归并到这三档。深于 .18 的深色遮罩与滚动条不属细线。分隔主要靠 1px 细线和留白分层，抬升感交给质感类的统一光影。

## 铁律

- ✓ 要：按钮圆角矩形：sm/md 8、lg 12
- ✗ 不要：按钮用 999 胶囊——胶囊只给不可点的徽章
- ✓ 要：外层卡片 16、卡内嵌套 12
- ✗ 不要：同一层级混用不同圆角
- ✓ 要：细线只取 .07 / .09 / .14
- ✗ 不要：.1、.12 这类中间值

---

上一页：[间距与基线](https://ui.zhaozimin.com/foundations/spacing.md) · 下一页：[光照模型](https://ui.zhaozimin.com/foundations/elevation.md) · 全站目录：https://ui.zhaozimin.com/llms.txt