最稳定实现灰色立体边框的方式是使用双层无模糊的box-shadow：box-shadow: 2px 2px 0 #ccc, 1px 1px 0 #999；其中#ccc为高光、#999为阴影，偏移一致且无模糊以保持硬朗边缘，适配高清屏需改用rem单位如0.0625rem。
直接用 border 加灰色边框是平的，要“立体感”，必须靠 box-shadow 模拟光照和厚度——这是目前最稳定、兼容性好、可控性强的方式。
用双层 box-shadow 做外凸立体灰边
灰色立体边的核心是明暗对比：浅灰作高光，深灰作阴影，偏移方向一致（右下），且不加模糊（blur=0）才能保持硬朗边缘。
- 推荐写法：
box-shadow: 2px 2px 0 #ccc, 1px 1px 0 #999; -
#ccc是主边颜色（亮灰），#999是紧贴其后的加深层（暗灰），形成“厚度”错觉 - 避免用
blur（如2px 2px 4px #aaa），会软化边缘，失去立体锐度
适配高清屏和响应式的关键细节
在 Retina 屏或缩放页面时，1px 偏移可能被渲染为物理 2px，导致立体感变重或失真。解决方法不是写一堆媒体查询，而是改用相对单位：
- 把偏移值换成
0.0625rem（即 1px 在 16px 根字号下）：box-shadow: 0.0625rem 0.0625rem 0 #ccc, 0.03125rem 0.03125rem 0 #999; - 这样缩放或换设备时，阴影比例始终一致，立体感不塌
别踩这些常见坑
有些看似省事的做法，在实际项目中容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
禁用
border-style: ridge或groove：浏览器渲染差异大，Windows 和 macOS 表现不一，移动端基本无效，且无法自定义高光/阴影色 -
不用
outline做立体边：它不支持偏移方向控制，也不能分层叠加，更不能模拟明暗 -
父子元素都加立体边时，注意 z-index：子图建议加
position: relative; z-index: 1;，防止父容器阴影盖住子图边框
纯 CSS 立体边不是真 3D，而是视觉欺骗。只要两层阴影方向对、颜色差明显、无模糊、单位合理，灰色边就能稳稳立起来。
