免费在线CSS轮廓(outline)生成器，可视化生成CSS outline样式。支持outline-width、outline-style、outline-color、outline-offset自定义，实时预览，一键复制CSS代码。纯前端工具，数据不上传服务器。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
实时预览
CSS Outline
CSS 代码
outline: 4px solid #06b6d4;
outline-offset: 2px;
什么是 CSS Outline？
CSS outline 属性是在元素周围绘制一条轮廓线，类似于 border，但它不会占用布局空间（不改变元素尺寸）。outline 通常用于焦点指示器、调试布局或视觉强调。
outline vs border 区别：
• outline 不占用布局空间，不会影响元素尺寸或周围元素位置
• outline 不支持圆角（不与 border-radius 对齐）
• outline 可以是不连续的（outline-offset 支持负值）
• outline 在所有边风格一致，不能为每边单独设置
• outline 常用于 :focus 伪类，替代默认的焦点环
常见问题
outline 和 border 可以同时使用吗？
可以。outline 在 border 外部绘制，中间间隔由 outline-offset 控制。常用于在已有边框的基础上添加焦点指示器。
如何移除 Chrome 默认的蓝色焦点轮廓？
使用 outline: none 可以移除默认焦点轮廓，但建议同时自定义焦点样式以保持可访问性：:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
outline-offset 可以设置负值吗？
可以。负值使 outline 绘制在元素边框内部。结合 outline-style: solid 可创建内部边框效果。