CSS outline 属性是在元素周围绘制一条轮廓线,类似于 border,但它不会占用布局空间(不改变元素尺寸)。outline 通常用于焦点指示器、调试布局或视觉强调。
outline vs border 区别:
• outline 不占用布局空间,不会影响元素尺寸或周围元素位置
• outline 不支持圆角(不与 border-radius 对齐)
• outline 可以是不连续的(outline-offset 支持负值)
• outline 在所有边风格一致,不能为每边单独设置
• outline 常用于 :focus 伪类,替代默认的焦点环
可以。outline 在 border 外部绘制,中间间隔由 outline-offset 控制。常用于在已有边框的基础上添加焦点指示器。
使用 outline: none 可以移除默认焦点轮廓,但建议同时自定义焦点样式以保持可访问性::focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }
可以。负值使 outline 绘制在元素边框内部。结合 outline-style: solid 可创建内部边框效果。