HTML5无专属边框标签，图片边框全靠CSS实现；常用border+border-radius组合控制粗细、颜色、圆角；box-shadow可实现浮雕/双线等效果；outline和border-image不推荐用于常规精致边框。
HTML5 本身不提供“加边框”的专属标签或属性，图片边框完全靠 CSS 控制；所谓“精致边框”，本质是用 border、outline、box-shadow 或 clip-path 等 CSS 特性组合实现视觉效果，而非 HTML 层面的修改。
用 border + border-radius 做基础精致边框
这是最常用也最可控的方式：边框粗细、颜色、圆角一步到位，且不影响布局流（除非设了 box-sizing: border-box）。
-
border必须写清三要素：width（如3px）、style（如solid）、color（如#4a5568），缺一不可 -
border-radius推荐用0.5rem或8px起步，避免50%导致椭圆（除非图是正方形） - 若图片有内边距（
padding）或外边距（margin），需同步检查是否挤压边框视觉表现
img {
border: 3px solid #e2e8f0;
border-radius: 0.5rem;
}
用 box-shadow 实现浮雕/描边/双层边框效果
box-shadow 不占空间，适合做“伪边框”——比如模拟发光、内凹、双线等 HTML/CSS 原生 border 难以直接实现的效果。
- 单侧描边：用
box-shadow: 4px 0 0 0 #cbd5e0（只向右偏移，无模糊、无扩散） - 内边框：加
inset关键字，如box-shadow: inset 0 0 0 2px #a0aec0 - 双线边框：叠加两个
box-shadow，例如外光晕 + 内实线 - 注意：
box-shadow在 Retina 屏上可能发虚，优先用整数像素值（如1px、2px）
img {
box-shadow:
0 0 0 2px #e2e8f0,
0 0 8px rgba(0, 0, 0, 0.08);
}
避免用 outline 或 border-image 做常规精致边框
这两个属性常被误认为“更高级”，实际在图片边框场景中容易出问题：
立即学习“前端免费学习笔记（深入）”；
-
outline不受border-radius影响，永远是直角；且会干扰可访问性焦点样式，慎用于非交互元素 -
border-image兼容性尚可（Chrome 16+、Firefox 15+），但切图麻烦、缩放易失真，且无法响应式适配不同尺寸图片 - 如果图是
SVG，反而推荐直接在 SVG 标签里用stroke和stroke-width，比 CSS 更精准
响应式边框在高 DPI 屏上的坑
在 MacBook、Windows HiDPI 屏或 iOS 设备上，1px 边框常被渲染成物理 2px，看起来发粗。解决思路不是加媒体查询，而是用 transform: scaleY(0.5) 或 box-shadow 模拟“视网膜细线”。
- 不要写
border: 0.5px solid #cbd5e0—— 大部分浏览器会向上取整为1px - 稳妥做法：用
box-shadow: 0 0 0 1px #cbd5e0，再配合@supports (-webkit-appearance: none)做 Safari 适配 - 如果项目已用 CSS 变量管理主题色，边框色建议从变量读取，而非硬编码，方便暗色模式切换
真正影响“精致感”的，往往不是用了多炫的 CSS 属性，而是边框宽度是否与图片尺寸比例协调、颜色是否和整体色调融合、以及在不同缩放级别下是否依然清晰稳定。动手前先放大到 200% 看一眼，比查十篇教程都管用。
