能，box-shadow可通过逗号分隔多层阴影模拟双层边框，如box-shadow: 0 0 0 2px #333, 0 0 0 6px #ccc，但它是纯视觉效果，不参与盒模型，不占布局空间。
box-shadow 能不能当双层 border 用
能，但得理解它不是真 border，只是视觉模拟。真实 border 参与盒模型计算、影响布局；box-shadow 是纯绘制层，不占空间、不影响其他元素位置。适合装饰性多层边框，不适合需要精确尺寸控制或响应式边距的场景。
怎么写两层 shadow 实现双层边框效果
核心是用逗号分隔多个阴影值，每层指定偏移、模糊、扩散和颜色。关键点：两层都设 0 0 偏移，靠 spread-radius 控制“厚度”，外层扩散更大。
- 第一层（内层）：
box-shadow: 0 0 0 2px #333—— 2px 宽，紧贴内容边缘 - 第二层（外层）：
0 0 0 6px #ccc—— 6px 宽，比内层多出 4px 空隙，形成双层感 - 合起来写：
box-shadow: 0 0 0 2px #333, 0 0 0 6px #ccc - 注意顺序：后写的 shadow 在视觉上盖在前一个上面，所以外层要写在后面才不会被遮住
为什么有时候 shadow 边框看起来“虚”或“溢出”
常见于父容器 overflow: hidden 或设置了 border-radius 的情况。因为 box-shadow 默认不裁切，超出父容器或圆角区域就会被截断或变模糊。
- 如果父容器有
overflow: hidden，双层 shadow 可能被直接砍掉 —— 改用padding预留空间，或换outline+border组合 - 遇到
border-radius，shadow 会按原始矩形扩散，导致圆角处出现“尖刺”或颜色不均 —— 加上inset或改用background-clip+ 多层background更可控 - 高缩放（如 125% DPI）下，像素对齐问题会让细 shadow 出现半透或抖动 —— 尽量让
spread-radius是整数，避免0.5px类值
box-shadow 双边框 vs 真实 border 的兼容性和性能差异
box-shadow 多层写法 IE10+ 支持，而 border 本身无法原生多色多层；但 shadow 在大量元素上连续重绘（比如滚动列表）时，GPU 加速不如原生 border 稳定，尤其老 Android WebView。
立即学习“前端免费学习笔记（深入）”；
- 真
border：支持border-image实现复杂边框，但学习成本高、调试难 -
box-shadow：写法轻量，支持透明色、渐变色，但无法设置border-style（如 dashed、dotted） - 极端情况（比如需要 hover 时切换内外边框颜色），建议用 class 切换两套
box-shadow值，而不是 JS 动态拼字符串
真正麻烦的是需要同时满足「精确尺寸」「圆角适配」「打印样式」和「无障碍焦点环」的场景——这时候别硬套 shadow，老实用两层 wrapper + border 更省心。
