必须用标准标签配合css控制边框，因非合法html元素，不解析src且无视css；css边框需同时指定宽度、样式、颜色三值（如border: 2px solid #333），缺一则不显示。
不能用 <image></image> 标签加边框，它不是合法 HTML 元素，图片根本不会加载；必须用标准 <img> 标签配合 CSS 控制边框样式。
为什么 <image></image> 标签加不了边框
浏览器把 <image></image> 当作未知自定义标签，按 display: inline 渲染，不支持 src 属性，也不解析你写的 CSS 边框规则。写 image { border: 2px solid red; } 完全无效——图片不显示，边框更无从谈起。
常见错误现象：
- 页面空白或只显示 alt 文字
- 开发者工具里能看到
<image></image>节点，但 computed styles 中 border 始终是 none - 无障碍阅读器无法识别，SEO 丢失图片语义
正确做法：只用 <img>，通过 class 或 id 精准控制样式。
border 三值缺一不可，否则边框不显示
HTML5 已废弃 img 的 border 属性（如 <img border="2">），必须用 CSS border。但只写 border-width: 2px 或 border-color: #333 都没用——因为默认 border-style 是 none，等于开关没打开。
必须同时指定宽度、样式、颜色：
-
border: 2px solid #333✅ -
solid 2px #333✅（顺序可变） -
border: 2px #333❌（缺样式） -
border-style: solid❌（缺宽和色）
常用样式值：solid、dashed、dotted（小尺寸下常渲染为方点）、double（要求宽度 ≥ 3px 才能看清）。
圆角、阴影、响应式边框怎么配才不翻车
border-radius 不是独立生效的属性，它只对已有 border 起作用；且如果图片是默认 display: inline，老版 Safari 可能不渲染圆角，或被 object-fit: cover 裁掉。
实操建议：
- 显式设置
display: block或display: inline-block -
border-radius值别超过图片宽高的一半，否则视觉上“消失” - 要加阴影又不想撑开布局？用
box-shadow+padding，别只靠border - 高清屏/缩放页面下，
1px边框容易模糊——改用0.0625rem（16px 基准下 ≈ 1px）或0.1em - 绝对别用
%写border-width，CSS 不支持
示例：
.framed-img {
display: block;
border: 0.0625rem solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
padding: 4px;
}
outline 不是 border，别混着用
很多人想加描边却用了 outline，结果发现：
- 圆角失效（
border-radius对outline无效） - 不能分边设置（没有
outline-top这种东西） - 焦点状态下蓝圈还在——那是
outline默认行为，不是你的边框
如果你真需要不占布局空间的描边（比如网格中怕挤占间隙），可以：
- 用
outline: 2px dashed #007bff - 加
outline-offset: 0控制偏移距离 - 但请记住：它永远画在元素外层，不参与盒模型，也不能替代
border的语义和功能
真正麻烦的不是加边框，而是加完之后发现图片位置偏了、圆角不见了、或者 Retina 屏上边框虚成一片——这些问题几乎都卡在 box-sizing、display、单位选择和属性组合顺序上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
