轮廓 outline
outline 不占空间的轮廓、offset 偏移、与 border 区别
轮廓 outline
outline 类似 border——但不占空间，常用于聚焦指示。
学完本章你将： 掌握 outline 与 border 区别、offset 偏移、focus 可见轮廓。
outline vs border
css
/* border：占空间，撑大元素 */
.with-border { border: 2px solid red; }
/* outline：不占空间，覆盖在其他元素上 */
.with-outline { outline: 2px solid blue; }| 区别 | border | outline |
|---|---|---|
| 占空间 | ✅ | ❌ |
| 各边独立 | ✅ | ❌（统一） |
| 圆角 | ✅ | ❌（跟随 border-radius） |
| 偏移 | ❌ | ✅ outline-offset |
outline 样式
css
.outline-solid { outline: 2px solid red; }
.outline-dashed { outline: 2px dashed blue; }
.outline-dotted { outline: 2px dotted green; }outline-offset
css
/* offset：轮廓与边框的距离 */
.box {
border: 2px solid #333;
outline: 2px solid tomato;
outline-offset: 5px; /* 轮廓向外偏移 5px */
}聚焦轮廓（可访问性）
css
/* 去掉默认轮廓后必须提供替代方案 */
input:focus {
outline: none; /* 去掉默认 */
border-color: #4CAF50; /* 替代指示 */
box-shadow: 0 0 0 2px rgba(76,175,80,0.3);
}