用box-shadow模拟边框能绕过对齐问题，因为box-shadow不参与盒模型计算，不会改变元素宽高、padding或border-box尺寸，可严格保持Grid/Flex布局承诺，且天然兼容border-radius，但不支持虚线、点线及outline行为。
为什么用 box-shadow 模拟边框能绕过对齐问题
因为 box-shadow（即使是 inset）不参与盒模型计算，不会改变元素的 width/height、padding 或 border-box 尺寸。当你需要保持容器严格按设定宽高布局（比如 Grid 列宽 200px、Flex 项目 flex-basis: 25%），又得有“视觉边框”时，直接加 border 会触发 content-box 撑开或破坏 border-box 的尺寸承诺——而 box-shadow: inset 0 0 0 1px #ccc 完全规避这点。
box-shadow inset 边框的实操写法与限制
核心语法是：box-shadow: inset 0 0 0 <thickness><color></color></thickness>，其中 <thickness></thickness> 必须是正值，单位支持 px、rem 等。
- 单像素内边框：
box-shadow: inset 0 0 0 1px #999; - 2px 内边框（等效
border-2）：box-shadow: inset 0 0 0 2px #999; - 圆角兼容：它天然跟随
border-radius，无需额外处理 - 无法设置虚线/点线：CSS 规范不支持
inset阴影的border-style变体，dashed、dotted无效 - 不响应
outline行为：比如聚焦时的outline仍需单独加，不能靠阴影模拟
和真实 border 混用时的常见错位场景
最典型的是“输入框 + 图标按钮”组合：输入框设了 border，右侧绝对定位按钮也设 border，但两者边框在接缝处重叠或露白。此时若把输入框的边框换成 box-shadow: inset，按钮保留真实 border，再配合 right-px（Tailwind）或 right: 1px（原生 CSS），就能让按钮左边缘精准贴合输入框内容区右缘，视觉无缝。
- 错误做法：两个元素都用
border+right-0→ 边框物理重叠 1px - 正确做法：输入框用
box-shadow: inset 0 0 0 1px，按钮用right-px（即right: 1px） - 注意：如果按钮本身也有
inset阴影边框，right-px就要改成right: 2px，否则会错位
浏览器兼容性与性能提醒
box-shadow: inset 在所有现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+）中完全支持，无兼容风险。但要注意两点：
立即学习“前端免费学习笔记（深入）”；
- 渲染开销略高于纯
border，不过单个元素上用 1–2px inset 阴影几乎不可测，不必担心 - 无法被打印样式表（
@media print）默认捕获——如果页面需打印，得额外加规则：@media print { * { box-shadow: none !important; } }，再用真实border回退
真正容易被忽略的，是当元素同时设置了 border 和 box-shadow: inset：后者会叠在前者上面，造成“双线”错觉，调试时得先检查 computed styles 里 border-width 是否意外非零。
