box-shadow模拟立体边框的本质是用两层方向相反、明暗有别的阴影精准叠加：高光层（浅色、正偏移）、阴影层（深色、负偏移），顺序为高光在前、阴影在后，偏移量决定立体强度，颜色需适配背景。
box-shadow 模拟立体边框的本质是多层阴影叠加
单层 box-shadow 只能产生单向模糊边缘，无法形成真实立体感；真正有效的“立体边框”必须用两层（或更多）方向相反、偏移量小、颜色有明暗差异的阴影组合——一层模拟高光（浅色、正向偏移），一层模拟阴影（深色、反向偏移）。
正确写法：用两个逗号分隔的 shadow 值控制明暗面
关键不是加很多层，而是精准控制两层的方向与明暗关系。常见错误是只写一层、或两层都用相同方向/颜色，结果看起来像重影而非立体。
- 高光层：用浅色（如
#fff或rgba(255,255,255,0.8)），x和y均为正值（如1px 1px），blur设为0或极小值（避免发虚） - 阴影层：用深色（如
#aaa或rgba(0,0,0,0.2)），x和y均为负值（如-1px -1px），blur同样设为0 - 顺序很重要：浏览器按书写顺序从后往前绘制阴影，建议把高光层写在前面，阴影层写在后面，避免被遮盖
box-shadow: 1px 1px 0 #fff, -1px -1px 0 #aaa;
适配不同边框粗细和颜色时的参数调整逻辑
“立体感强度”由偏移量绝对值决定，不是由颜色深浅单独控制。改粗边框不能只调颜色，必须同步放大 x/y 偏移。
- 想模拟
2px立体边框？把偏移量改为2px 2px和-2px -2px，同时确保颜色对比足够（比如#f0f0f0和#999） - 深色背景上要用更亮的高光（如
rgba(255,255,255,0.9)）和更柔和的阴影（如rgba(0,0,0,0.15)），否则会刺眼或看不见 - 圆角元素（
border-radius）下立体效果依然成立，但注意不要让blur值过大，否则圆角处阴影会糊成一团
容易忽略的兼容性与性能细节
box-shadow 在所有现代浏览器中支持良好，但老版 IE（≤9）完全不支持。另外，虽然两层阴影开销极小，但若在大量元素（如表格单元格、列表项）上滥用，仍可能触发频繁重绘。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:hover中突然添加多层box-shadow，会导致布局抖动；建议始终保留基础层，只改变颜色或偏移量 - 移动端 Safari 对
box-shadow的spread值渲染略有差异，但本方案未使用spread，所以无影响 - 如果元素本身有
border，记得用border: none覆盖，否则真实边框会和阴影打架
