box-shadow: inset 可实现真正内边框，双线效果需两层 inset 阴影叠加（如 inset 0 0 0 2px #333, inset 0 0 0 4px #fff），不占布局空间、支持 border-radius，但仅支持实线且需容器包裹 img 以确保兼容性。
用 box-shadow: inset 实现真正内边框双线
“内边框”不是指 border 往里缩，而是视觉上嵌入图片内部的线条；border 本身无法做内边框，但 box-shadow: inset 可以。双线效果靠两层 inset 阴影叠加实现，且不干扰布局、支持圆角。
-
box-shadow: inset 0 0 0 2px #333, inset 0 0 0 4px #fff;—— 第一层深色线（2px 宽），第二层浅色线（再加 2px，总宽 4px），中间留白形成“双线感” - 必须写在同一
box-shadow声明里，用逗号分隔，否则后声明会覆盖前声明 - 颜色对比要足够：比如
#333和#fff、#666和#e0e0e0，纯黑+纯白在多数背景上最稳 - 不支持
dashed或dotted，所有 inset 阴影都是实线；若需虚线内边框，得用伪元素模拟
给 img 加内边框？先包一层容器
img 是替换元素，box-shadow: inset 在部分浏览器（如旧版 Safari）对 img 渲染不可靠。稳妥做法是套一个 div 或 figure 容器，把内边框加在容器上。
- HTML 结构：
<div class="inner-double"><img src="..."></div> - CSS：
.inner-double { box-shadow: inset 0 0 0 2px #444, inset 0 0 0 5px #ddd; border-radius: 6px; } - 容器设
display: inline-block或display: block，避免img默认的基线对齐空白 - 如果图片本身有
max-width: 100%，容器也要继承或重置，否则阴影可能被裁切
为什么不用 border: double 模拟内边框？
border: 3px double #000 看起来像双线，但它本质是单层边框、固定样式、不支持 border-radius，更关键的是：它是外边框，永远画在内容区域之外，和“内边框”语义相反。
-
double的最小有效宽度是 3px；设成 2px 多数浏览器退化为单线 - 它按
content-box计算，会撑大容器尺寸；而box-shadow: inset不占空间 - 无法控制两条线之间的间隙宽度——这是双线内边框的核心需求，只有多层
inset阴影能精确控制 - 如果硬要用
double还想“看起来像内嵌”，只能配合负margin补偿，但响应式下极易错位，不推荐
高清屏（Retina）下内双线发虚？用整数像素+透明背景
在 MacBook 或 iPhone 上，小尺寸 box-shadow 阴影容易因亚像素渲染变模糊，尤其两层 inset 间距小于 2px 时。
立即学习“前端免费学习笔记（深入）”；
- 避免用
1px和2px组合；起步用2px和5px，确保间隙 ≥2px - 背景必须是纯色或透明；渐变/图片背景会让 inset 阴影边缘发晕
- 不要依赖
rgba()半透色做内线——半透叠加会导致灰阶不准，改用实色+明确对比 - Safari 对
inset阴影的 subpixel 渲染较激进，测试时务必开“开发者 → 开发 → 显示像素网格”确认是否对齐物理像素
inset，如果容器没设 overflow: hidden 且图片溢出，阴影会被裁掉；如果父级有 transform 或 will-change，某些 Chrome 版本会禁用 inset 渲染。这些细节不报错，但效果直接消失。 
