应使用 css border 属性而非废弃的 html border 属性；后者仅支持数字宽度、无法设样式/颜色、不兼容现代布局特性，且与 css 冲突；css border 必须同时指定 width、style、color 三要素，推荐简写如 border: 2px solid #666。
直接用 CSS 的 border 属性，别碰 <img> 标签的 border HTML 属性——它已废弃，且行为不可控。
为什么不能用 <img border="1"> 这种写法
这个 HTML 属性在早期浏览器中能出边框，但现代标准下它只是“勉强兼容”，实际问题一堆：
- 它只接受纯数字（如
border="2"），无法指定样式（solid）或颜色，浏览器会按默认色（通常是黑色）+ 默认样式（实线）渲染，但不保证一致 - 它会给所有四边都加等宽边框，没法单独控制上边或右边
- 和 CSS 的
border规则共存时容易冲突，比如你写了<img border="1" style="max-width:90%">，结果取决于浏览器解析优先级，Chrome 可能忽略border属性，Safari 早期版本可能优先用它 - 它不响应
box-sizing、border-radius等现代布局控制，圆角边框完全无效
border CSS 属性必须同时包含三要素
很多人写了 style="border-width: 2px; border-color: #666;" 却看不到边框——因为漏了 border-style。浏览器默认值是 none，等于没设。
- 三者缺一不可：
width+style+color，顺序可变，但style不能省 - 常用
style值：solid、dashed、dotted、double；none和hidden都表示无边框，但语义不同（hidden在表格边框折叠时有特殊作用） - 简写最安全：
border: 2px solid #666;，一行搞定，不易漏 - 想只加底边？用
border-bottom: 1px dashed #999;，比先清空再设更可靠
图片边框常被忽略的尺寸与布局影响
给 <img> 加边框后，元素总宽度 = 原图宽 + 左右 border 宽度 + 左右 padding（如果有）+ 左右 margin。这很容易撑破容器，尤其在响应式布局里。
- 解决方法：在 img 上加
box-sizing: border-box;，让边框和内边距计入 width 计算范围（注意：需同时设置明确的width，否则无效） - 如果图是行内元素（默认），边框可能和文字基线对不齐，加
vertical-align: middle;或改用display: block;更稳 - 圆角边框要生效，得先有边框：
border: 2px solid #007bff;+border-radius: 4px;，单独写border-radius没用 - 避免用
outline代替border——它不占布局空间，焦点状态下才显示，不是真正的“边框”
真正麻烦的不是怎么加边框，而是加完之后它是否稳定参与布局、能否被后续 CSS（比如 filter、transform）正确作用，以及会不会在高 DPI 屏幕上模糊——这些全依赖你用的是标准 CSS border，而不是那个躺在 HTML4 文档里的 border 属性。
