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 更合适。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
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 三个值，得看它在哪个上下文里生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
