HTML5中图片边框靠CSS的border控制，简写需含border-style；outline和box-shadow可作伪边框；响应式下注意border缩放，border-radius需配合overflow:hidden防溢出。
用 border 属性直接加边框最简单
HTML5 本身不提供专门给图片加边框的标签或属性，实际靠 CSS 的 border 控制。只要图片是 border。
常见写法：
img {
border: 2px solid #333;
}或者内联写：@@##@@
-
border是简写，等价于border-width+border-style+border-color - 不设
border-style（比如只写border: 1px #000）边框不会显示——这是新手最常漏掉的点 - 默认
vertical-align: middle
用 outline 和 box-shadow 做“伪边框”
当需要边框不占布局空间、或要实现发光/双线等效果时，border 不够灵活，这时换用 outline 或 box-shadow 更合适。
-
outline不影响盒模型尺寸，但只能是矩形、不能设圆角，且无法单独控制某一边 -
box-shadow: 0 0 0 2px #666可模拟边框，支持inset内阴影，还能配合border-radius一起用 - 注意：用
box-shadow模拟边框时，如果图片有透明背景，阴影可能透出底色，需检查父容器背景
响应式场景下边框缩放要注意什么
图片在移动端缩放后，固定像素的 border: 2px 可能显得过粗或过细。这不是 bug，是 CSS 像素计算逻辑决定的。
- 用
border-width: 0.1rem或border-width: 2px配合viewport缩放更可控 - 慎用
border-image——它在多数移动浏览器兼容性差，且图片缩放时容易拉伸失真 - 如果用
object-fit: cover裁剪图片，边框始终围绕整个
图片边框与 border-radius 组合的坑
给带边框的图片加圆角，看似简单，但容易出现边框断裂、颜色溢出或锯齿。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
border-radius和overflow: hidden才能确保圆角内边框不溢出（尤其当图片内容超出容器时） - 如果用了
outline，它不遵循border-radius，永远保持直角矩形 - Safari 对
border-radius+border的渲染偶尔有抗锯齿异常，加transform: translateZ(0)可强制 GPU 加速缓解
border 三个值，得看它在哪个上下文里生效。
