可行，但内边框须用inset、外边框用普通写法；两者不可混于同一层，不支持虚线且不响应鼠标事件。
直接用 box-shadow 模拟内外边框是可行的，但必须分清：内边框只能靠 inset，外边框靠普通写法；两者不能混用同一层阴影，也不能指望它支持虚线或响应鼠标事件。
如何用 box-shadow: inset 模拟内边框
它本质是向内投影，视觉上紧贴内容区边缘，不占布局空间，且严格跟随 border-radius。关键参数只有四个：inset 0 0 0 ，其中前两个 0 是偏移，第三个 0 是模糊值（必须为 0 才实线），第四个是扩展半径——也就是“边框宽度”。
- 单像素内边框：
box-shadow: inset 0 0 0 1px #666 - 要叠加两层内边框？逗号分隔：
box-shadow: inset 0 0 0 1px #333, inset 0 0 0 3px #eee（注意顺序：先写的在底层） - 别和真实
border共存却不检查计算样式——border会把inset阴影的起点往外推，导致视觉错位 - 移动端 Safari 13–14.4 对多层
inset支持不稳定，此时得降级用伪元素
如何用普通 box-shadow 模拟外边框
外边框就是常规投影，不加 inset 即可。重点在于控制 blur 为 0、用 spread 控制粗细，避免发虚或溢出。
- 2px 实线外边框：
box-shadow: 0 0 0 2px #e74c3c - 想和已有
border留间隙？比如元素本身有border: 1px solid #000，再加外红边，就得写box-shadow: 0 0 0 4px #e74c3c（从黑边外再扩 4px，实际间隙是 3px） - 圆角下容易露直角：若
border-radius: 6px，则spread值不能超过6px，否则边缘变方 - 别用正模糊值（如
0 0 4px 2px）模拟“软外边框”，它不是边框，只是光晕，交互热区不覆盖
为什么不能用 outline 替代外边框
outline 看似简单，但它和 border 渲染逻辑完全不同，根本不能当第二层边框用。
-
outline不随border-radius弯曲，哪怕元素是圆角，轮廓仍是硬角 - 无法精确控制离边距离：
outline-offset在不同浏览器里存在 1px 渲染偏差 - 不支持
border-style的多数变体（比如double、groove），只认dashed/dotted/solid - 聚焦时自动出现的
outline和你手动写的冲突，调试时容易误判
三重边框怎么写才不出错
常见错误是把扩散值写成绝对宽度（比如 2px, 4px, 6px），结果外层盖掉内层。正确做法是按“累积厚度”来设 spread，顺序从内到外。
- 三层同心环（内细、中宽、外浅）：
box-shadow: 0 0 0 1px #333, 0 0 0 5px #eee, 0 0 12px 10px rgba(0,0,0,0.1) - 第一层
1px是最内圈；第二层5px表示从中心扩出 5px，实际中圈宽度是5−1 = 4px；第三层带模糊，用于发光感 - iOS Safari 对超过 3 层
box-shadow有渲染抖动，动画中尤其明显，建议用 class 切换预设而非动态增减 - 打印时
box-shadow默认不出现，需额外加@media print { * { box-shadow: none !important; } }并回退到真实border
真正麻烦的从来不是写法，而是判断「这里到底需不需要真实边框」：如果涉及 offsetWidth 计算、表格 border-collapse、或者第三方组件依赖 border 尺寸，那 box-shadow 再好看也得让位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
