HTML5中img标签禁用border属性，须用CSS控制；border需写全宽、样式、色三要素；box-sizing: border-box可防尺寸变化；box-shadow实现不占位描边需设display:block/inline-block；Safari下需显式设置display解决border-radius失效。
别用 border 属性直接写在 <img> 标签里——HTML5 已弃用它，样式控制必须交给 CSS。
用 CSS 的 border 属性加真实边框
这是最常用、最可控的方式，但必须写全三要素：宽度、样式、颜色。缺一不可，否则不生效。
-
border: 2px solid #333是标准写法；只写border: 2px或border: solid都无效 - 想只加左边框？用
border-left: 3px dashed #999，但它会覆盖之前的border简写值，顺序很重要 - 加了边框后图片实际占位变大（默认
box-sizing: content-box），若要保持宽高不变，必须加box-sizing: border-box - 如果图片用了
object-fit: cover，border-radius仍有效，但过大的圆角可能被裁切，建议从8px开始试
用 box-shadow 实现不占布局的“描边”
box-shadow 不改变元素尺寸，适合需要保持排版稳定或叠加多重边框的场景，但前提是图片不能是行内元素。
- 必须设
display: block或display: inline-block，否则阴影不渲染或被截断 - 双层边框可这样写：
box-shadow: 0 0 0 2px #000, 0 0 0 6px #ccc，两个阴影叠加，自动贴合border-radius - 父容器若有
overflow: hidden，阴影会被裁掉，得检查并移除 - 要圆角+阴影一起生效，
border-radius必须加在<img>自身上，不能只加在父容器上
Safari 下 border-radius 不生效怎么办
不是代码错，是 Safari 对默认 display: inline 的 <img> 渲染限制，尤其在 iOS 15.2 及更早版本。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：显式加
display: block或display: inline-block - 如果图片已嵌套在
<figure>或<div>里，优先给容器设border-radius+overflow: hidden，比操作<img>更可靠 - 旧版 Android WebView 或 Gmail/Outlook Web 客户端可能忽略
object-fit，这时唯一办法是提前把图裁成正方形再引用
最容易被忽略的是：边框和阴影本身不占内容空间，但它们会扩大元素的视觉边界；如果没配 box-sizing: border-box 或没处理 display 类型，布局就容易错位——这不是 bug，是盒模型逻辑在起作用。
