box-shadow: inset 能在绝大多数视觉边框场景安全替代 border，但不支持虚线、点线及 outline 行为，且打印时需回退；失效主因是元素无尺寸、无背景或被 overflow: hidden 裁剪。
box-shadow: inset 能不能当 border 用
不能完全替代，但能在绝大多数「视觉边框」场景下安全替换——前提是不依赖虚线、点线、outline 行为，也不需要打印输出。
关键区别在于：border 是盒模型的一部分，参与尺寸计算和渲染逻辑；box-shadow: inset 是纯绘制层效果，不改变 getBoundingClientRect() 返回的宽高，也不响应 :focus-visible 的 outline 逻辑。
- ✅ 可替代：实线、圆角、单色、固定粗细（如
1px或2px）的边框 - ❌ 不可替代：
border-style: dashed/dotted/double——inset阴影不支持任何样式变体 - ⚠️ 半替代：需要聚焦 outline 时，得额外加
outline: 2px solid #007aff，且要配outline-offset: 2px避免重叠
为什么 box-shadow: inset 看不见？常见失效原因
不是语法写错，而是三个硬性前提没满足：元素没尺寸、没背景、被父容器裁掉了。
- 必须有显式
background-color（哪怕transparent），否则阴影无处附着 - 元素得有明确宽高（
width/height，或由内容+min-width撑开），空div加inset无效 - 父容器若设了
overflow: hidden，大blur或正spread的内阴影会被直接裁掉边缘 -
<input>和<textarea></textarea>默认 UA 样式会屏蔽box-shadow，必须加appearance: none和background-color: transparent
和真实 border 同时用会怎样
会叠加出双线效果，调试时容易误判。Chrome DevTools 的 computed styles 里看到 border-width: 1px，但视觉上像 2px，大概率是两者共存了。
- 检查是否误写了
border: 1px solid #ccc; box-shadow: inset 0 0 0 1px #ccc;→ 这是典型“双线”陷阱 - 如果真要混合（比如外边框 + 内凹效果），确保
border和inset颜色/粗细有区分，避免视觉粘连 - 打印场景下，
@media print { * { box-shadow: none !important; } }必须加，否则边框消失，又没 fallback
真正容易被忽略的细节
不是怎么写 inset，而是它和 border-radius 的交互方式：圆角越大，内阴影越“收窄”，小尺寸元素上可能只剩四个角有点灰边；想保持均匀，得配合正 spread 值（比如 inset 0 0 0 2px #999）或增大 blur（如 6px）来补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
