HTML5中img的border属性已废弃，必须用CSS控制边框；border需同时指定宽度、样式、颜色三要素（如border: 2px solid #333），并注意display、box-sizing和border-radius等配套设置以避免布局问题。
HTML5 中 <img> 标签的 border 属性已被废弃，直接写 <img border="2"> 是非法 HTML，浏览器可能忽略或报错。所有边框必须用 CSS 控制。
用 border 实现标准边框（最常用）
这是绝大多数场景的首选：语法直白、兼容性好、支持圆角和响应式单位。
-
border必须同时指定三要素：宽度（如2px）、样式（如solid、dashed、double）、颜色（如#333或rgba(0,0,0,0.2)） - 图片默认是
inline元素，底部常有空白间隙，加display: block;或display: inline-block;可消除 - 边框会增加元素总尺寸（盒模型默认为
content-box），若需保持宽高不变，得配box-sizing: border-box; -
border-radius可加圆角，但注意：50%只对正方形图片生效；非正方形会变椭圆
用 outline 做不占布局的描边（防挤占）
当你只想视觉强调、又怕边框影响周围网格或行内排版时，outline 是轻量替代方案。
-
outline绘制在元素外层，不影响文档流，也不改变元素尺寸 - 不支持
border-radius，永远直角；也不能分边设置（没有outline-top这种写法） - 某些浏览器点击后会自动加聚焦虚线，非交互场景建议显式写
outline-offset: 0; - 示例：
outline: 2px dashed #007bff; outline-offset: 2px;
用 box-shadow 模拟内边框、双线或高清细线
原生 border 难以实现内凹、多层、发光等效果，box-shadow 更灵活，尤其适合 Retina 屏适配。
立即学习“前端免费学习笔记（深入）”；
- 内边框：
box-shadow: inset 0 0 0 2px #a0aec0; - 双线效果（带圆角）：
border: 2px solid black; border-radius: 6px; box-shadow: 0 0 0 2px black; - 高清屏下 1px 发粗？别硬写
0.5px—— 它常被向上取整为1px；更稳妥用box-shadow: 0 0 0 1px #ddd;模拟细线（不参与盒模型，且不会被缩放）
避免常见坑：圆角 + 边框 + 响应式同时生效
很多人写 border-radius: 50% 却出不了真圆，不是 CSS 错了，是条件没凑齐。
-
width和height必须是相等的**固定值**（如120px），不能是width: 100%+height: auto，否则算出来是椭圆 - 原始图不是正方形？加
object-fit: cover;强制居中裁剪；但老 Android WebView 或 Gmail 等邮件客户端可能忽略它 - 如果用了
transform或will-change，某些旧版 Chrome 下overflow: hidden可能失效，此时退回直接操作<img>更稳 - 最容易被忽略的一点：加了
border或box-shadow后，若没设box-sizing: border-box;，容器实际尺寸会撑大，导致布局错位
