在网页中为图片添加轮廓，通常是为了强调选中状态、悬停反馈或视觉装饰。CSS 提供了两种不占用布局空间的方案：outline 和 box-shadow。前者是专门用来描述元素轮廓的属性，后者则通过模拟阴影实现更灵活的多层轮廓。理解它们的绘制位置、是否参与盒模型计算以及对圆角的响应方式，是选择正确方案的前提。
一、先分清 outline 和 border：轮廓不占空间
CSS 盒模型由内容、内边距、边框和外边距组成。给元素设置 border 时，边框宽度会直接增加元素在页面中占用的总面积。也就是说，如果给一张图片添加 4px 的边框，图片的可视尺寸虽然没有变化，但布局尺寸会向外扩展 4px，周围内容可能因此发生位移。
outline 则不同。它绘制在元素边框外侧，甚至可以通过 outline-offset 进一步远离元素边缘，但它完全不参与盒模型计算。也就是说，outline 不会影响图片在文档流中的位置，不会推动相邻元素，也不会改变父容器的尺寸。需要特别注意，虽然 outline 出现在 border 之外，但它并不是 border 的替代品，而是一种独立的强调机制。
下面这段代码可以直观看出两者的区别：
.border-demo {
border: 4px solid #e74c3c;
}
.outline-demo {
outline: 4px solid #2ecc71;
}
如果两张图片并排放在同一行，使用 border 的图片会占用更多布局空间，而使用 outline 的图片则保持原有占位。开发中如果只想要视觉上的高亮，不希望引起布局抖动，outline 通常是更合适的选择。
二、用 outline 属性给图片设置基础轮廓
outline 的完整写法包含宽度、样式和颜色三个部分，也可以使用简写形式，语法与 border 类似。例如：
.outlined-img {
display: block;
max-width: 100%;
height: auto;
outline: 5px solid #0ea5e9;
outline-offset: 8px;
}
对应的 HTML 如下：
<img src="photo.jpg" class="outlined-img" alt="风景图片">
上面的代码中，outline 设置了一条 5px 的实线蓝色轮廓，outline-offset: 8px 让轮廓与图片边缘之间保留 8px 的空白间隙，形成类似相框的效果。这里还设置了 display: block 来消除图片作为行内元素底部产生的额外空隙，同时通过 max-width: 100% 保证图片在窄屏设备上能够自适应缩放。
使用 outline 时有一个关键点：outline-style 不能省略。如果只设置 outline-color，轮廓不会显示，因为默认样式是 none。常见样式值包括 solid、dashed、dotted、double 等。此外，outline-offset 可以取负值，负值时轮廓会向图片内部收缩，形成内部高亮线。
交互效果也可以基于 outline 实现。例如悬停时改变轮廓颜色和偏移量：
.outlined-img {
outline: 3px solid transparent;
outline-offset: 4px;
transition: outline-color 0.25s ease, outline-offset 0.25s ease;
}
.outlined-img:hover {
outline-color: #f97316;
outline-offset: 8px;
}
注意初始状态必须保留相同的 outline-style，这里使用透明实线轮廓，才能让 outline-color 和 outline-offset 平滑过渡。如果初始只写 outline-color 而样式为 none，过渡会失效。
在可访问性方面，不建议直接使用 outline: none 移除焦点轮廓，这会影响键盘用户的导航体验。更推荐的做法是为 :focus-visible 设置清晰可见的轮廓，并且与悬停样式区分开，例如使用不同的颜色或增加偏移距离。
三、用 box-shadow 模拟轮廓：多层与圆角优势
box-shadow 是另一种常用的轮廓模拟方案。它的语法中包含偏移量、模糊半径、扩展半径和颜色，其中扩展半径是模拟轮廓的核心。当水平和垂直偏移量为 0、模糊半径为 0 时，只依靠扩展半径就能生成不占空间的实心轮廓区域。
.shadow-outline {
border-radius: 12px;
box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #3b82f6;
}
这个例子使用了两层阴影：第一层是 4px 的白色轮廓，第二层是 8px 的蓝色轮廓。层叠顺序按照声明先后从外向内排列，因此白色层会隔开图片边缘和蓝色外层，形成双轮廓效果。与 outline 相比，box-shadow 可以同时设置多层，灵活度更高。
box-shadow 的另一个优势是对圆角的支持。早期部分浏览器中 outline 不会跟随 border-radius，导致图片设置了圆角后轮廓仍然显示为直角。现代浏览器已经修复了这个问题，但 box-shadow 在更早的浏览器版本中就已经能够跟随圆角绘制，兼容性更好。因此如果项目需要兼容旧环境，或者需要多层圆角轮廓，box-shadow 会更加稳定。
除了实心轮廓，box-shadow 还可以利用模糊半径模拟发光边缘：
.glow-img {
border-radius: 16px;
box-shadow: 0 0 0 3px #facc15, 0 0 24px 6px rgba(250, 204, 21, 0.65);
}
这里第一层阴影依然是清晰的轮廓，第二层带模糊半径和半透明颜色，产生扩散的发光效果。需要注意的是，模糊半径越大，浏览器渲染成本越高。如果页面中存在大量图片并且频繁触发动画，建议尽量让模糊半径为 0，只用扩展半径模拟轮廓，或者改用 outline 以降低性能开销。
四、综合实战：悬停高亮、键盘聚焦与响应式
一个常见的应用场景是相册列表：鼠标悬停或键盘聚焦到某张图片时，需要显示高亮轮廓，同时保证相邻图片不发生位移。使用 border 会改变布局尺寸，即使提前给所有图片加上透明边框，也会让每个元素都多出一部分占位。outline 和 box-shadow 都没有这个问题。
下面的示例结合 outline 和过渡效果，同时处理悬停与键盘聚焦：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.gallery img {
display: block;
max-width: 100%;
height: auto;
border-radius: 14px;
outline: 3px solid transparent;
outline-offset: 5px;
transition: outline-color 0.2s ease, outline-offset 0.2s ease;
}
.gallery img:hover,
.gallery img:focus-visible {
outline-color: #dc2626;
outline-offset: 9px;
}
对应 HTML 结构如下：
<div class="gallery"> <img src="photo-1.jpg" alt="山峰"> <img src="photo-2.jpg" alt="海岸"> <img src="photo-3.jpg" alt="森林"> </div>
初始轮廓是透明的，但保留了 solid 样式，因此过渡效果可以正常触发。鼠标悬停和键盘聚焦共用同一组样式，避免出现鼠标用户有反馈而键盘用户什么都没有的情况。偏移量从 5px 变为 9px，既能形成明显的强调效果，又不会触碰到相邻元素。
响应式场景中，图片通过 max-width: 100% 随容器缩放，outline 会跟随元素实际渲染尺寸绘制，不需要额外调整。但要注意，如果图片外层容器设置了 overflow: hidden，并且 outline-offset 较大，轮廓可能被容器裁切。此时可以适当减小偏移量，或者改用 box-shadow，也可以给容器增加内边距来保留轮廓的显示空间。
综合来看，如果只需要单层轮廓并且重视焦点可访问性，outline 是首选；如果需要多层轮廓、圆角一致性或发光效果，box-shadow 更合适；而 border 虽然也能做出边框效果，但因为会影响布局，不建议用来实现视觉轮廓。理解这些属性的渲染差异，能帮助你在不同场景下做出更稳定的选择。
CSS图片轮廓CSS outlineoutline-offset修改时间：2026-08-25 17:51:56