wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
19 lines
1.5 KiB
HTML
19 lines
1.5 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Spacing" name="圆角" subtitle="偏大圆角 = 亲和友好" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
|
.row{display:flex;gap:18px;align-items:flex-end}
|
|
.box{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
|
|
.sq{width:100%;height:64px;background:var(--accent-subtle);border:1.5px solid var(--accent-border)}
|
|
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg2)}</style></head><body>
|
|
<div class="lab">RADII · 圆角 — 偏大 = 亲和友好</div>
|
|
<div class="row">
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-sm)"></div><span class="n">sm 6</span></div>
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-md)"></div><span class="n">md 10</span></div>
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-lg)"></div><span class="n">lg 14</span></div>
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-xl)"></div><span class="n">xl 20</span></div>
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-2xl)"></div><span class="n">2xl 28</span></div>
|
|
<div class="box"><div class="sq" style="border-radius:var(--radius-full)"></div><span class="n">full</span></div>
|
|
</div>
|
|
</body></html>
|