box-shadow inset 是模拟内嵌式边框最可靠的纯 CSS 方案：div { box-shadow: inset 0 0 0 2px #666; }，其中 inset 实现向内凹陷，0 偏移确保居中，0 模糊保证锐利，2px 扩展值控制粗细，#666 为颜色。
用 box-shadow 模拟内嵌式边框最可靠
纯 CSS 实现“内嵌”（inset）效果，box-shadow 是唯一无需额外 HTML 元素、兼容性好、且真正支持内阴影的方案。别用 border 或 outline 硬凑——它们只能画外边框或等宽轮廓，无法产生向内凹陷的视觉感。
关键在 inset 关键字和负偏移值的组合：
div {
box-shadow: inset 0 0 0 2px #666;
}说明：
• inset 表示阴影向内投射
• 前两个 0 是水平/垂直偏移（必须为 0 才居中成边框）
• 第三个 0 是模糊半径（设为 0 才锐利如边框）
• 2px 是扩展半径，决定“边框粗细”
• #666 是颜色
border 加 background-clip 不是真内嵌，慎用于交互场景
有人用 border 配合 background-clip: padding-box 让背景不覆盖边框，造成“边框在内容内侧”的错觉。但这只是视觉欺骗，不是真正的内嵌阴影，且存在明显缺陷：
立即学习“前端免费学习笔记（深入）”；
- 无法表现明暗过渡，缺乏立体感
- 鼠标悬停或焦点状态时，
:focus-visible或:hover的 outline 仍会盖在外围，破坏一致性 - 当区块有圆角（
border-radius）时，border和背景交界处可能出现像素级色差
仅适合静态展示、对质感无要求的后台管理类界面。
IE11 及更旧浏览器不支持 inset？用降级方案保底线
IE11 支持 box-shadow，但不支持 inset 关键字。若项目仍需兼容 IE11，可采用双声明 + 层叠覆盖：
div {
border: 2px solid #999; /* IE11 fallback */
box-shadow: inset 0 0 0 2px #666; /* Chrome/Firefox/Safari/Edge */
}现代浏览器会覆盖 border 声明，IE11 则忽略 inset 并保留 border。注意：
• 不要依赖 border-image，它在 IE 中行为不一致
• 避免用伪元素 ::before 模拟内边框，z-index 和 pointer-events 容易出问题
内嵌边框遇到 overflow: hidden 会被裁切？调整 box-shadow 扩展值
当父容器设了 overflow: hidden，而子区块用了 inset 边框，有时边框会消失——这不是 bug，是因为 box-shadow 的绘制区域被裁剪了。根本原因是：即使 inset，阴影仍属于“层叠上下文”的一部分，受父级 overflow 影响。
解决办法是让阴影完全落在内容区内，不越界：
- 确保区块自身没有
margin或负transform导致位置偏移 - 把
box-shadow的扩展值（第四个长度值）设为正值，例如inset 0 0 0 3px，比预期边框略宽，可抵消渲染误差 - 更稳妥的做法：给父容器加
padding，留出阴影空间，而非依赖裁剪
真正在意细节时，内嵌边框不是加个样式就完事——它牵扯到层叠上下文、渲染管线和用户对“凹陷”的心理预期。一个像素的偏差，在深色背景下就会显得格外突兀。
