img默认为inline元素，无独立盒模型，故inset阴影不生效且上下边框被line-height遮挡；必须设display:block或inline-block才能使二者正常显示。
直接用 box-shadow: inset + border 组合，但必须先设 display: block 或 display: inline-block，否则内阴影不显示、边框可能被遮挡。
为什么 box-shadow: inset 对 img 默认无效
根本原因是 img 默认是 display: inline 元素：
– inset 阴影只作用于元素的“盒模型内部”，而 inline 元素没有独立的块级渲染上下文
– 浏览器会忽略对纯 inline 元素的 inset 计算，连 warning 都不报
– 同时，上下 border 会被父容器的 line-height 压扁或截断，看起来像没加
- 必须显式设置
display: block（推荐）或display: inline-block - 若用
inline-block，记得补vertical-align: middle避免基线错位 - 不要依赖
float或position来“绕过” display 问题——那只是掩盖症状
box-shadow: inset 的参数陷阱和正确写法
inset 必须紧贴在第一个值前面，顺序错或漏写都会导致整条规则被浏览器静默丢弃：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确：
box-shadow: inset 0 0 8px rgba(0,0,0,0.2) - 错误：
box-shadow: 0 0 8px inset rgba(0,0,0,0.2)（inset位置错） - 错误：
box-shadow: inset 0 0 8px（缺颜色 → 整条失效） -
blur-radius为 0 时是硬边内凹，适合模拟“压进画布”的效果；大于 4px 后边缘发虚，立体感迅速减弱
边框与内阴影协同时的常见冲突
加了 border 后，inset 阴影默认从 border 内侧开始绘制，但视觉上容易和边框“粘连”或“打架”：
立即学习“前端免费学习笔记（深入）”；
- 想让阴影浮在边框之上？不行——
inset永远在 border 内侧，无法盖住边框 - 边框太粗（比如 >3px）+ 阴影模糊大（>6px），会导致阴影边缘被 border “吃掉”，显得脏且不清晰
- 推荐组合：
border: 2px solid #e0e0e0+box-shadow: inset 0 0 4px rgba(0,0,0,0.1) - 如果要更强烈的内凹感，改用双层
inset：box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), inset 0 -1px 2px rgba(255,255,255,0.3)（模拟高光+暗部）
最容易被忽略的是：哪怕你写了 border-radius，inset 阴影依然严格按矩形盒模型往里缩——它不会自动贴合图片圆角。如果图片本身是圆形（border-radius: 50%），但父容器没设 overflow: hidden，阴影仍会撑出原矩形范围。这时候得靠外层容器兜底，而不是指望 inset 自适应。
