正在加载...

CSS Outline

你已经会画 border（边框）。Outline 是相近但用途不同的工具：它在 border 盒的外侧画一圈，并且 — 与 border 不同 — 不占用布局空间。加上 outline 时，邻居不会被推开。

Outline 与 border

在心智地图里把这两种工具分开。

📊 Outline 与 border

特性 Outline Border
布局空间 不占空间；盒子尺寸不变 占空间；可能增大 border 盒
常见位置 border 边缘外侧 环绕 padding
常见用途 焦点环、临时强调 永久 UI 边缘与卡片边框
是否参与盒模型尺寸计算 否 是（默认 content-box）

简单的 outline

样式、宽度和颜色的用法很像 border — 但环画在外侧。

基础 outline

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

Outline 简写

熟悉的三件套：宽度、样式、颜色。要显示出来必须有样式 — 只写 outline: 2px #000 不够。

Outline 简写

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

常见 outline 样式

Solid、dashed、dotted 是日常选择。outline: none 会去掉这圈 — 请谨慎使用（见下方焦点）。

Outline 样式示例

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — 把环往外推

outline-offset 把 outline 从 border 边缘移开，且不改变布局尺寸。正值往外推；负值往里收。

带 offset 的 outline

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

外观相似，布局代价不同

两个盒子可能看起来差不多，但只有 border 会改变元素占多少空间。

Border 会变大；outline 不会

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* 两者看起来都醒目；.with-border 占更多布局宽度 */

对焦点友好的习惯

浏览器常用 outline（或类似的环）标出键盘焦点。不要给所有元素写 outline: none。若你重写焦点样式，请提供清晰的替代环，让键盘用户仍能看到自己在哪里。

保留可见的焦点环

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

自己动手

  1. 给带 padding 的盒子加 border 和更粗的 outline — 邻居不会动。
  2. 在 solid、dashed、dotted 之间切换 outline 样式。
  3. 加上 outline-offset: 8px，看环向外飘开。
  4. 并排放 .with-border 与 .with-outline — 视觉重量相近，布局宽度不同。
  5. 与其全局去掉 outline，不如给按钮写 :focus-visible。

常见错误

  • 算布局宽度时把 outline 当成 border（outline 不加尺寸）
  • 对所有元素写 outline: none 又不给焦点替代
  • 指望 outline 把邻居推开（那是 margin 或 border 的事）
  • 只写宽度和颜色却没有样式（solid / dashed / …）
  • 把 outline 和刚学的盒模型各层搞混

小结

  • Outline 画在 border 外侧，不占布局空间
  • 简写：宽度、样式、颜色 — 样式必需
  • outline-offset 移动环而不改变盒子尺寸
  • Border 用于永久边缘；outline 适合焦点与临时环
  • 为键盘用户保留可见焦点 outline（或同等替代）

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程