唯一可靠方案是box-shadow多层无模糊偏移：第一层浅灰右下偏移模拟高光，第二层深灰微小右下偏移模拟背光；img需设display:inline-block或block；高清屏应改用rem单位；父子立体边框需用position:relative和z-index分层。
纯 CSS 实现图片立体边框，唯一可靠路径是 box-shadow 多层无模糊偏移，border 本身永远是平的——别在 border-style: ridge 或 outline 上浪费调试时间。
为什么 box-shadow 是唯一靠谱方案
浏览器对 border-style: ridge、groove、inset 的渲染完全依赖系统主题和 UA 样式表，Chrome 和 Safari 在 macOS 上常渲染为单色细线，Windows 下略明显但颜色不可控，移动端基本失效。而 box-shadow 是标准绘制层，方向、颜色、偏移全可编程，且 IE9+ 全支持。
关键不是“加阴影”，而是用两层硬边（blur: 0）制造明暗错觉：
- 第一层浅灰右下偏移（如
2px 2px 0 #e0e0e0），模拟高光 - 第二层深灰微小右下偏移（如
1px 1px 0 #999），模拟背光厚度 - 两者叠加形成视觉“凸起”，比单层阴影厚实得多
img 元素必须先改 display 才生效
img 默认是 inline 元素，box-shadow 对它完全不绘制，border 上下边还常被 line-height 吞掉。不改显示模式，立体边框根本出不来。
两种稳妥写法：
-
display: inline-block：适合图文混排，保留基线对齐，可配vertical-align: middle -
display: block：更彻底，尤其图片独占一行或需居中时
别用 float 或 position: absolute 替代——它们会破坏文档流，引发更多布局问题。
高清屏和缩放下立体感消失？单位错了
在 Retina 屏或页面缩放为 125% 时，1px 偏移常被渲染为物理 2px，导致阴影过重甚至错位；0.5px 又会被四舍五入成 1px，失去精度。
正确解法是换用相对单位，锚定根字号：
- 把
2px 2px 0 #e0e0e0, 1px 1px 0 #999改成0.125rem 0.125rem 0 #e0e0e0, 0.0625rem 0.0625rem 0 #999 - 前提是
html或:root的font-size为默认 16px（即 1rem = 16px） - 若项目用了动态根字号（如
clamp(14px, 1rem, 18px)），该写法依然成立，缩放时比例恒定
父子元素都有立体边框时，z-index 不是可选项
当图片嵌在带 box-shadow 的卡片或侧边栏里，父容器阴影极易盖住子图边框，尤其偏移值相近时（比如都用 2px 2px）。
必须显式干预堆叠上下文：
- 给图片加
position: relative（否则z-index无效） - 设
z-index: 2（父容器默认是auto，等价于 0） - 避免父子都用大偏移：父用
0.0625rem级，子用0.125rem级，自然分层
真正难处理的不是“怎么加”，而是“谁该在上”——立体感本质是视觉层叠，不是样式堆砌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
