必须用CSS的border属性且三值齐全（如border: 2px solid #333），HTML5已废弃img的border属性，border="2"无效；缺宽度、样式或颜色任一值，边框均不显示。

直接用 border，但必须写全三要素：宽度、样式、颜色；缺一个，边框就消失。

为什么 border="2" 不起作用

HTML5 已彻底废弃 img 标签的 border 属性（比如 <img border="2" alt="HTML怎么给图片加实线外框_网页图片简单边框【技巧】" >）。现代浏览器要么忽略它，要么行为不一致。你看到边框没出来，不是代码写错了，是这条路根本走不通。

• 旧写法无效：<img src="a.jpg" border="2" alt="HTML怎么给图片加实线外框_网页图片简单边框【技巧】" >
• 正确写法（内联）：<img src="a.jpg" style="max-width:90%" alt="HTML怎么给图片加实线外框_网页图片简单边框【技巧】" >
• 别信“只设颜色或只设宽度就行”——border-color: red 单独写，border-style 默认是 none，等于关着开关

border: 2px solid #333 的顺序和取值能乱吗

顺序可以调，但三值一个都不能少。浏览器按语义识别，不是按位置硬记。

• 合法写法：border: solid 2px #333、border: #333 2px solid、border: 2px #333 solid
• 非法写法：border: 2px #333（缺样式）、border: solid #333（缺宽度）、border: 2px solid（缺颜色）
• 样式值必须是明确关键字：solid、dashed、dotted、double（注意：double 要求宽度 ≥ 3px 才能看清）
• 单位推荐 px（确定）、rem 或 em（响应式），别用 % —— CSS 不支持百分比宽度的 border-width

加了 border 图片错位/变大/挤出容器怎么办

默认盒模型是 content-box，border 会额外增加尺寸。如果你写了 width: 200px; height: 150px; border: 3px solid #2ecc71;，那图片实际占宽是 206px（左右各 +3px），高是 156px（上下各 +3px）。

立即学习“前端免费学习笔记（深入）”；

• 解法一（推荐）：box-sizing: border-box，让边框包含在宽高中：style="width: 200px; height: 150px; border: 3px solid #2ecc71; box-sizing: border-box;"
• 解法二（仅视觉描边）：用 outline，它不参与布局计算：outline: 2px solid #e67e22; outline-offset: 0;，但注意它不支持圆角、不能分边、可能被聚焦样式干扰
• 千万别手动把宽高减去边框总和来“凑数”——响应式断点一变，立刻崩

只想加某一边的实线外框，怎么写才安全

用单边属性，比如 border-bottom，它不会重置其他三边，适合叠加控制或局部强调。

• 只加下边：border-bottom: 2px solid #3498db;
• 只加左右：border-left: 1px solid #95a5a6; border-right: 1px solid #95a5a6;
• 清除某边：border-top: none;（别用 0，语义不清，部分老浏览器不认）
• 注意：单边写法不会自动把其他边设为 none，如果之前有全局 border，得显式覆盖

最容易被忽略的是盒模型影响——哪怕你边框写对了，没加 box-sizing: border-box，又用了固定宽高，布局就大概率在缩放、高清屏或不同设备上错位。这不是 bug，是默认行为。