必须用CSS的border属性实现，且需同时指定宽度、样式、颜色三要素（如border: 2px solid #007bff）；HTML5已废弃img的border属性，单独设border-color或border-width无效。
HTML 本身不提供给 <img> 加描边的原生属性，border 属性在 HTML5 中已废弃；必须用 CSS 实现，且“描边”不是视觉术语——你要的是 border、outline，还是模拟非布局干扰的视觉强调？选错方案会导致排版错乱或圆角失效。
用 border 给图片加真实边框（最常用）
这是真正“加边”的方式，但会改变元素尺寸（默认 box-sizing: content-box），需主动控制盒模型。
- 必须写全三要素：
border-style（如solid）、border-width（如2px）、border-color（如#333），缺一不可；简写为border: 2px solid #333 - 想只加某一边？用
border-top、border-left等单独设置，但注意：它们会覆盖简写值，顺序很重要 - 要保持图片宽高不变？加
box-sizing: border-box，否则width: 200px的图加上border: 4px后实际占位是 208px - 圆角必须配合
border-radius，但若图片用了object-fit: cover，且border-radius值过大，圆角会被裁切——先试小值（如8px），再递增
用 outline 做不占布局空间的“描边”
它画在元素外侧，不影响周围元素排版，适合响应式网格中临时强调，但功能受限。
-
outline不参与盒模型计算，加了也不会挤占 margin/padding 空间 - 不能设圆角：
border-radius对outline完全无效 - 不能分边设置：
outline-top不存在，只能统一四边 - 某些浏览器（尤其 Safari）对聚焦态
outline有默认虚线行为，非交互场景务必加outline-offset: 0显式归零
需要多重边框或半透明边框？别硬套 border
单层 border 搞不定时，box-shadow 和 background-clip 是更可控的选择。
立即学习“前端免费学习笔记（深入）”；
- 双层边框：用
box-shadow叠加（如box-shadow: 0 0 0 2px #000, 0 0 0 6px #ccc），它不占布局、自动贴合border-radius - 半透明边框：直接写
border: 4px solid hsla(0,0%,0%,.3)会因背景色透出而显脏；必须加background-clip: padding-box，让背景止步于内边距边缘 - 伪元素方案（
::before）适合复杂描边（如渐变、虚实混合），但需额外 DOM 结构和定位控制，小项目没必要
为什么 img 的 border-radius 在 Safari 里有时不生效？
老版本 Safari（iOS 15.2 及更早）对内联元素的 border-radius 渲染异常，不是 bug，是渲染引擎限制。
-
<img>默认是display: inline，Safari 对 inline 元素的圆角支持不稳定 - 解决方法：显式声明
display: block或inline-block，再设border-radius - 如果图片还套了
figure或div，优先给容器设圆角 +overflow: hidden，比直接操作img更可靠
真正容易被忽略的点不在语法，而在盒模型和渲染上下文：border 改尺寸、outline 不圆角、Safari 对 inline 元素的圆角限制、半透明边框被背景污染——这些都不是“不会写”，而是没意识到 CSS 属性生效的前提条件。动手前，先确认你到底要“物理边框”还是“视觉描边”，再选对应路径。
