纯css立体边框需用多层box-shadow模拟光照，外凸用右下双阴影（如2px 2px 0 #ccc, 1px 1px 0 #999），内凹用inset双色；禁用blur>4px、groove/ridge等不可靠样式；父子元素需调控z-index与偏移量避免重叠；响应式应采用rem或clamp适配dpr。
用 box-shadow 模拟立体边框效果
纯 CSS 实现“立体边框”，本质是叠加多层 box-shadow 制造明暗错觉，不是真 3D。单靠 border 无法出立体感，必须靠阴影模拟光照方向。
常见错误是只加一层阴影，结果只是“浮起”，没有厚度感；或者用 inset 阴影但方向反了，看起来像凹陷而非凸起。
- 外凸立体：主阴影偏右下（
2px 2px 0 #ccc），再叠一层更暗、更近的右下阴影（1px 1px 0 #999） - 内凹立体：用
inset+ 左上浅色 + 右下深色（inset -1px -1px 0 #eee, inset 1px 1px 0 #999） - 别用
blur值过大（比如 >4px），会糊掉边缘，失去“硬边立体”感
border-style: groove / ridge 不可靠
groove 和 ridge 看似直接，但实际渲染高度依赖系统主题和浏览器，默认灰度差极小，Chrome 和 Safari 渲染差异明显，移动端基本无效。
使用场景仅限快速原型或对视觉精度无要求的内部工具；生产环境必须用 box-shadow 替代。
立即学习“前端免费学习笔记（深入）”；
- Windows 上
ridge可能比 Mac 更明显，但依然不可控 - 所有
border-style的立体系（groove、ridge、inset、outset）都不支持自定义高光/阴影颜色 - 若强行用，务必配
border-color多色组合（如border-color: #aaa #666 #666 #aaa），但兼容性仍差
两个边框同时立体？小心层叠顺序和 z-index
当容器和子元素都有立体边框时，容易因阴影重叠导致视觉混乱——比如父容器阴影盖住子元素边框，或两者阴影打架变脏。
关键不是“怎么加”，而是“谁该在哪一层”。默认情况下，box-shadow 属于绘制层（painting layer），不触发新堆叠上下文，除非有 z-index 或其他属性干预。
- 给父容器加立体阴影时，子元素用
position: relative+ 小幅z-index: 1确保其边框不被遮挡 - 避免父子都用大偏移阴影（如
4px 4px），推荐父用1px 1px，子用2px 2px，形成自然前后关系 - 测试时关掉抗锯齿（Chrome 开发者工具 → Rendering → “Emulate CSS reduced motion” 旁勾选 “Paint flashing”）可快速定位重绘冲突
响应式下立体感易失效
缩放页面或在高 DPR 屏幕（如 Retina）上，1px 偏移的阴影可能被设备像素比吞掉，看起来像没效果；或者 2px 在小屏上显得过厚。
这不是 bug，是物理像素映射问题。解决方案不是写媒体查询堆一堆尺寸，而是改用 rem 或视口单位锚定基础值。
- 把阴影偏移写成
0.0625rem 0.0625rem（即 1px 在 16px 基准下），随根字号缩放 - 或用
clamp(1px, 0.1vw, 2px)控制偏移范围，防止小屏过重、大屏过淡 - 切忌在
@media (prefers-reduced-motion: reduce)下保留立体阴影——应直接降级为单色边框
立体感本质是光学欺骗，细节全在 1px 级别的偏移与色阶里；调不好不是代码错，是没盯着真实设备多刷几次页面。
