必须用css的border属性，且需同时指定宽度、样式、颜色三值，如border: 2px solid #333；html5已废弃img的border属性，border="2"无效。
直接用 border 就行，但必须写全三要素：宽度、样式、颜色；缺任意一个，边框都不显示。
为什么 border="2" 不起作用？
HTML5 已废弃 img 标签的 border 属性（比如 <img border="2">），浏览器可能忽略或行为不一致。现代写法必须走 CSS 路线。
- 旧写法无效：
<img src="a.jpg" border="2"> - 正确写法（内联）：
<img src="a.jpg" style="max-width:90%"> - 颜色支持命名色（
red）、十六进制（#ff6b6b）、RGB（rgb(231, 76, 60)）
border 三个值顺序能换吗？
能，但 solid（或其它样式）不能省——浏览器默认 border-style: none，没它就等于没边框。
- 合法写法：
border: #e74c3c solid 2px或border: solid 2px #e74c3c - 非法写法：
border: 2px #e74c3c（缺样式）、border: solid #e74c3c（缺宽度） - 单位推荐用
px（确定）、em（响应式场景），避免用pt或in
只想加某一边的实线外框？
用单边属性更安全，不会意外覆盖其他边：
- 只加下边：
border-bottom: 2px solid #3498db; - 只加左右：
border-left: 1px solid #95a5a6; border-right: 1px solid #95a5a6; - 清除某边：
border-top: none;（别用0，语义不清且部分旧浏览器不认） - 注意：单边写法不会自动重置其余三边，适合叠加控制
边框加了但图片错位/撑大了怎么办？
默认盒模型下，border 会增加元素总尺寸。若图片宽高是固定值（如 width: 200px），加上 border 后实际占用空间变大。
- 解法一（推荐）：加
box-sizing: border-box;，让 border 包含在宽高中style="width: 200px; height: 150px; border: 3px solid #2ecc71; box-sizing: border-box;" - 解法二：改用
outline（仅视觉描边，不占布局空间），但不支持圆角、不能分边、有聚焦干扰风险style="outline: 2px solid #e67e22; outline-offset: 0;" - 关键点：只要用了
border，又没设box-sizing: border-box，就得手动把宽高减去边框总和，否则响应式布局容易崩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
