轮廓属性
最后更新：2026-09-13
outline 轮廓属性
outline 是绘制在元素边框之外的轮廓线，主要用于标识元素获得焦点（focus）的状态。与 border 不同，outline 不占据空间，不会影响元素的尺寸和页面布局。它是简写属性，可同时设置轮廓的颜色、样式和宽度。
| 分类 | |
|---|---|
| 初始值 | medium none currentcolor |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
outline: <outline-color> || <outline-style> || <outline-width>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<outline-color> || <outline-style> || <outline-width> | 值 | 轮廓简写（不占空间，用于聚焦提示） |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v9 |
| 所有主流浏览器均支持 | |||||
重要： outline 常用于可访问性的焦点提示。不建议使用 outline: none 移除默认焦点样式，除非你提供了同等清晰的替代方案。
❓ 常见问题
Qoutline 和 border 该用哪个？
A需要参与布局、作为盒模型一部分的装饰性边框用 border；需要不占空间的视觉提示（尤其是键盘焦点状态）用 outline。outline 绘制在边框外，不影响元素尺寸，还可通过 outline-offset 控制距离。不要用 outline: none 移除焦点样式，应自定义清晰的替代样式。
Qoutline 能设置圆角吗？
A可以。现代浏览器（Chrome 94+、Firefox 88+、Safari 16.4+）中 outline 已会跟随元素自身的 border-radius 绘制圆角，旧版本浏览器则显示为直角。如需精确控制轮廓形状，可改用 box-shadow 模拟，它天然支持圆角且不占空间。
Q如何自定义好看的焦点样式（替代默认 outline）？
A用 outline 简写配合 outline-offset：outline: 2px solid #0078d4; outline-offset: 2px;，让轮廓与元素留出空隙。不要用 outline: none 移除焦点提示，会损害键盘用户可用性；若改用 box-shadow 实现，要确保对比度足够。
Qoutline 和 box-shadow 有什么区别？
Aoutline 是可设置线型和宽度的轮廓线，不占空间，现代浏览器中跟随元素圆角；box-shadow 通过模糊和扩散模拟描边（如 box-shadow: 0 0 0 2px red;），支持多阴影、发光、内阴影等更丰富的效果。两者都不影响布局，box-shadow 无法实现虚线等线型，focus 样式常组合两者。
🏷️ 相关属性
💡 相关案例
📚 相关教程
