box-shadow 可独立实现阴影边框效果：设水平/垂直偏移为0，用 spread-radius 撑开、blur-radius 控制虚化；加 inset 实现内阴影；多层阴影用逗号分隔，从左到右逐层叠加。
用 box-shadow 实现阴影边框，不是 border
HTML5 本身不提供“阴影边框”这种独立属性，真正起作用的是 CSS3 的 box-shadow。很多人误以为要配合 border 才能出效果，其实不然——box-shadow 自身就能模拟带阴影的边框，而且更灵活。关键在于控制偏移、模糊、扩展和颜色四个参数。
常见错误是把 box-shadow 写成单值（如 box-shadow: 5px 5px #000），结果阴影偏移明显、没有内收感，看起来不像“边框”。真正接近边框效果的做法是：水平/垂直偏移设为 0，靠 spread-radius 向外“撑开”阴影，再用 blur-radius 控制虚化程度。
-
box-shadow: 0 0 0 2px rgba(0,0,0,0.2)→ 等效于 2px 宽、轻微透明的实线阴影边框 - 想叠加在真实
border上？确保border值不为none，且box-shadow的spread-radius大于border-width，否则会被遮盖 - 注意：
box-shadow不占文档流，不影响元素尺寸；而border会参与盒模型计算
想要内阴影边框？必须加 inset 关键字
默认 box-shadow 是外阴影。如果目标是类似“凹陷边框”或“内容被压进一层”的视觉效果，比如表单输入框常用的那种，就必须显式写上 inset。
漏掉 inset 是新手最常踩的坑——写了半天阴影没反应，其实是它默默画到元素外面去了，可能被父容器裁剪或根本看不见。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow: inset 0 0 0 1px #ccc→ 细内边框，适合 input、textarea -
inset和外阴影不能共存于同一个声明中；如需内外都有，得用逗号分隔多个阴影：box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 0 0 1px #eee -
inset阴影受overflow: hidden影响，若父容器裁剪了子元素，内阴影可能被截断
多层阴影叠加时，顺序和透明度决定最终观感
一个 box-shadow 声明里可以写多个阴影，用逗号分隔。渲染顺序是从左到右，即第一个阴影在最底层，最后一个在最上层。这点和 z-index 相反，容易混淆。
比如给按钮加“立体边框”效果：
button {
box-shadow:
0 0 0 1px rgba(0,0,0,0.1), /* 最外层细线 */
0 0 0 2px rgba(255,255,255,0.8), /* 中间亮边 */
0 2px 4px rgba(0,0,0,0.15); /* 最外层微模糊投影 */
}
- 越靠前的阴影越“深”，越靠后的越“浮”；调整顺序可快速切换主次关系
- 所有阴影共享同一坐标系（以元素盒为原点），所以
0 0偏移对每一层都生效 - 避免滥用高模糊值（如
blur-radius > 20px）+ 高透明度组合，会导致边缘发灰、细节丢失
兼容性与性能要注意这些实际限制
box-shadow 在现代浏览器中支持极好（IE9+，包括 Edge 12+），但仍有两个现实约束必须面对：
- 在 iOS Safari 低版本（inset 阴影配合
border-radius可能出现锯齿或渲染错位，建议用overflow: hidden+ 子容器圆角绕过 - 大量使用高模糊、大扩散的
box-shadow（尤其动画中）会触发全图重绘，导致滚动卡顿；Chrome DevTools 的 “Rendering” 面板里勾选 “Paint flashing” 能直观看到 - 不要用
box-shadow替代border来做响应式粗细控制——它的像素值不会随缩放变化，而border-width支持em、rem、vw等相对单位
实际项目里，最稳妥的阴影边框方案往往就一行：box-shadow: 0 0 0 1px rgba(0,0,0,0.08)。复杂效果容易失控，尤其是嵌套、动画、高DPI屏混合场景下，细微的透明度或扩散值偏差就会让整体质感崩掉。
