HTML5已废弃img的border属性，border="2"无效；必须用CSS border属性，且需同时指定宽度、样式、颜色三值，如border: 2px solid #333。
img 标签的 border 属性在 HTML5 中已废弃，写了也无效，浏览器可能忽略或行为不一致。必须用 CSS 的 border 属性控制边框样式。
为什么 border="2" 不起作用
HTML5 规范移除了 img 的 border 属性（包括 border="0"），它只接受一个像素值，无法定义样式和颜色，语义和能力都严重不足。现代浏览器虽仍能解析该属性（出于兼容性），但：
- 它仅等效于
border-width，默认border-style: none，所以实际不显示边框 - 无法设置
solid/dashed等样式，也不能指定颜色 - 在严格模式（
!DOCTYPE html）下，验证器会报错，构建工具可能警告或过滤
border: 2px solid #333 三个值缺一不可
CSS 的 border 是简写属性，必须同时包含宽度、样式、颜色。只写 border-width: 2px 或 border-color: red 都不会显示边框——因为默认 border-style 是 none，等于开关没打开。
- 合法写法示例：
border: 2px solid #333、border: dashed 1em rebeccapurple - 样式值必须是关键字：
solid、dashed、dotted（注意小尺寸下常渲染为方点）、double（宽度需 ≥ 3px 才可见双线） - 颜色不能留空，
#333、rgb(51, 51, 51)、transparent均可，但border: 2px solid无效
加圆角前务必检查 display 和 box-sizing
很多人写了 border-radius: 6px 却看不到圆角，问题往往出在布局上下文里：
-
img默认是display: inline，在旧版 Safari 或某些行内流场景中，border-radius可能被裁切或不生效；显式设为display: block或display: inline-block更稳妥 - 边框默认增加元素总尺寸（盒模型为
content-box），若图片宽高固定（如width: 200px; height: 150px），加边框后会撑大容器；加box-sizing: border-box可让边框“向内缩” -
border-radius值超过图片自身宽高一半时，会被object-fit: cover等裁剪逻辑吃掉，不是 bug，是预期行为
用 outline 还是 border？看是否要占布局空间
如果只是视觉描边、不想影响周围元素排版（比如网格间隙、文字环绕），outline 是更轻量的选择：
-
outline绘制在元素外层，不参与盒模型计算，不影响布局 - 但它不支持
border-radius，也不能分边设置（outline-top不存在） - 焦点状态下的默认蓝圈就是
outline，若你用它做静态描边，记得加outline-offset: 0明确偏移量，避免浏览器默认偏移导致位置飘忽 - 移除焦点轮廓不能只靠
outline: none，必须补上:focus-visible替代方案，否则键盘用户会失去焦点指示
真正容易被忽略的不是怎么写边框，而是单位选 px 还是 rem、display 是否显式声明、box-sizing 是否同步调整——这些细节决定了边框在 Retina 屏、缩放页面、嵌套布局中是否稳定出现。
