CSS Outline Generator

预览与设置

预览文本

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 可创建内部边框效果。