轮廓偏移属性
最后更新：2026-09-13
outline-offset 轮廓偏移属性
outline-offset 用于控制轮廓（outline）与元素边框边缘之间的距离。正值让轮廓向外偏移，远离元素；负值让轮廓向内偏移，贴近甚至进入元素内部。它常与 outline 配合使用，实现更精致的视觉效果。
| 分类 | |
|---|---|
| 初始值 | 0 |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
outline-offset: <length>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<length> | 类型 | 轮廓偏移距离 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline-offset | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： 正值偏移常用于按钮或卡片，让焦点轮廓与元素之间留出呼吸空间，视觉更清晰。
❓ 常见问题
Qoutline-offset 会影响布局吗？
A不会。与 outline 一样，outline-offset 不占据布局空间，不影响元素尺寸和文档流。即使取负值让轮廓进入元素内部，也不会改变内容排布。它只改变轮廓与元素边框边缘之间的距离，正值向外偏移、负值向内收缩。
Qoutline-offset 支持负值吗？
A支持。负值让轮廓向内收缩，甚至进入元素内部，例如 outline-offset: -3px; 可让焦点轮廓紧贴按钮边缘内侧。若偏移量过大导致轮廓超出视口，浏览器不会因此出现滚动条，越界部分会被裁掉。常用正负值配合做出"内嵌式"焦点样式。
Q如何用 outline 配合 offset 做出双层描边效果？
A把 outline 与 border 叠加：外层用 border: 2px solid #333;，内层用 outline: 2px solid #fff; outline-offset: -6px;。两者都不占布局空间，叠加即可形成双线装饰效果，常用于卡片、按钮和图片框，比嵌套多个 div 更简洁。
🏷️ 相关属性
💡 相关案例
📚 相关教程
