HTML5中img边框必须用CSS实现，需解决尺寸自适应、Retina屏细线不发粗、布局不塌陷三问题；推荐box-sizing:border-box+display:block+border-radius+box-shadow替代0.5px边框。
HTML5 中 <img> 标签的 border 属性早已被废弃，所有边框效果必须通过 CSS 实现；响应式图片边框不是“加个 border 就完事”，它要同时解决三件事：尺寸自适应、高清屏细线不发粗、布局不塌陷。
用 border + box-sizing: border-box 控制基础边框
这是最常用也最容易出错的组合。直接写 border: 2px solid #ccc 很容易让图片总宽度超出父容器——因为默认 box-sizing: content-box，边框会额外增加尺寸。
- 必须显式加
box-sizing: border-box，否则max-width: 100%会失效 -
display: block或display: inline-block要跟上，否则<img>默认是 inline 元素，底部留白间隙 - 圆角推荐用
border-radius: 4px，别盲目设50%——非正方形图会变椭圆 - 示例：
img.responsive-border {<br> max-width: 100%;<br> height: auto;<br> border: 2px solid #e2e8f0;<br> border-radius: 4px;<br> box-sizing: border-box;<br> display: block;<br>}
Retina 屏下 1px 边框发粗？用 box-shadow 替代
border: 0.5px solid #ddd 在 Safari、Chrome 上基本无效，会被四舍五入成 1px；硬写 0.5px 不仅没用，还可能触发渲染抖动。
- 稳妥方案是
box-shadow: 0 0 0 1px #ddd，它不参与盒模型，也不受设备像素比影响 - 如果需要内边框（比如卡片内嵌图），用
box-shadow: inset 0 0 0 1px #cbd5e0 - 注意：不要在同一个元素上混用
border和box-shadow模拟细线，容易叠加变粗
需要双线、浮雕或不占布局的描边？选对属性场景
不是所有“边框”都该用 border。不同视觉目标对应不同技术路径：
立即学习“前端免费学习笔记（深入）”；
- 纯视觉强调、不想挤占周围空间 → 用
outline（如outline: 2px dashed #3182ce; outline-offset: 2px;），但它不支持圆角、不能分边设置 - 要内凹、发光、双层描边 → 用
box-shadow多层叠加，例如双线：box-shadow: 0 0 0 2px #e2e8f0, 0 0 0 4px #cbd5e0 - 想用图片当边框（比如木纹、虚线纹理）→ 必须用
border-image，但兼容性差（IE11+、Safari 15.4+ 才稳定），慎用于核心 UI
响应式图片网格里的边框一致性问题
在 grid 或 flex 图册中加边框，常见问题是最后一行列宽不均、边框重叠或间隙错位。
- 用
gap控制间距，别用margin模拟——否则grid的自动列数逻辑会崩 - 所有图片统一套
aspect-ratio: 4/3或外层包div+overflow: hidden，防止边框因图片比例不同而高度不一致 - 边框颜色建议用
rgba()或系统色（如color-mix(in srgb, currentColor 20%, transparent)），适配深色模式时不用额外写媒体查询
真正难的不是写对一行 border，而是边框在 srcset 切换图片、picture 切换构图、prefers-reduced-motion 开启时是否还稳——这些地方没人帮你自动适配，得手动测。
