边框与描边
Borders & Strokes
别名:边框描边线框边界线给元素加个框点击时那圈高亮borderoutlinering
这是什么
用线条勾出元素的边界与状态：border 占据盒模型空间、outline 画在盒外不挤动布局、box-shadow 的 ring 用透明阴影描一圈。 普通态用低对比 border 静默分界，悬停加深、聚焦用 outline、报错换色；三者各司其职，边界才既清楚又不抖动。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 输入框、卡片、按钮需要用细线勾出可点区域
- 悬停、聚焦、报错需要可感知但不重排布局的状态差
- 扁平风格里没有投影，靠描边区分相邻表面
✕ 不适用场景
- 用粗彩色边框装饰每个区块，页面像被框满的表格
- 在 border 与 outline 之间反复切换同一元素，宽度突跳
- 拿描边替代留白和分隔线来组织信息层级
常见形式
实体边框
Solid border
计入盒模型尺寸，稳定但会占位；配 box-sizing: border-box 不撑破容器
轮廓描边
Outline
画在盒外，可 outline-offset 拉开距离，不参与布局；聚焦态首选
阴影环
Shadow ring
用 0 0 0 Npx 的 box-shadow 模拟描边，不占空间、可叠多层
实现要点
border: 1px solid var(--color-line)box-sizing: border-boxoutline: 2px solid var(--color-accent)outline-offset: 2pxbox-shadow: 0 0 0 3px var(--color-accent-soft)全局设 box-sizing: border-box，让边框算进声明宽度，加粗描边不会把相邻元素挤走。默认态用 1px 的 --color-line 静默分界； 悬停换成 --color-line-strong；聚焦用 outline（不占位、可 offset），不要用 border 代替，否则元素会跳 2px； 报错换语义色并加一条 error 文案，别只靠颜色。需要无位描边时用 box-shadow: 0 0 0 3px var(--color-accent-soft)。
平台 API
borderoutlinebox-shadowbox-sizingborder-radius代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | border |
| CSS | outline |
| Tailwind CSS | border / ring |
相关概念
用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
无障碍搭配使用用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件搭配使用用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件搭配使用用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
基础相似概念用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格搭配使用