必须将img设为inline-block或block才能使box-shadow生效，因其默认inline特性导致阴影不渲染且边框被line-height遮挡；box-shadow需配合border-radius和正确参数顺序使用，父容器overflow:hidden也会裁剪阴影。
直接用 box-shadow 配合 border-radius 和显式 display 设置，就能做出“带阴影感的边框”效果；别指望只靠 border 模拟阴影——它没层次、没深度，纯色边框永远只是边框。
为什么 img 默认加 box-shadow 没反应
根本原因是 img 默认是 display: inline 元素：box-shadow 对纯 inline 元素完全不生效（CSS 规范明确限制），上下边框还容易被 line-height 吃掉。
- 必须显式设置
display: inline-block或display: block，这是前提，不是可选项 -
inline-block适合图文混排，但要注意vertical-align可能导致基线错位，建议补上vertical-align: middle -
block更稳妥，尤其当图片需居中或独占一行时 - 漏写单位（如写成
border: 1 solid #000）也会让样式失效，必须是1px、0.1em等合法值
box-shadow 参数顺序和常见误配
box-shadow 的参数顺序错一个就全乱，且浏览器不报错，只默默回退到默认值或失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确顺序：
h-offset v-offset blur-radius spread-radius color -
blur-radius为 0 是硬边阴影；省略则默认为 0，但想有“阴影感”，通常设为4px–12px - 想让阴影紧贴边框？把偏移量设为 0：
box-shadow: 0 0 8px rgba(0,0,0,0.15) - 要模拟“发光边框”效果？加大
spread-radius（如2px），再配合小blur-radius（如4px）：box-shadow: 0 0 4px 2px rgba(0,0,0,0.1) - 内阴影必须加
inset关键字：box-shadow: inset 0 0 6px rgba(0,0,0,0.1)，但它永远在 border 内侧，无法盖住边框
border-radius + box-shadow 协同要点
圆角不只是为了好看，它直接影响阴影形态：border 和 box-shadow 默认都跟随 border-radius 走，但 blur-radius 过大会让阴影边缘“发虚”，看起来脱离图片轮廓。
立即学习“前端免费学习笔记（深入）”；
- 若用了
border-radius: 50%（正圆），但图片宽高不等，会拉伸变形 → 必须加object-fit: cover保比例 - 阴影被裁？检查父容器是否设置了
overflow: hidden—— 它会直接砍掉超出部分 - PNG 有透明区域时，
box-shadow仍按矩形盒模型渲染，阴影边缘是方的 → 此时该换用filter: drop-shadow()，它按 Alpha 通道轮廓投影 - 但注意：
drop-shadow()不支持inset，IE 完全不支持，旧 Edge 需加-webkit-前缀
最容易被忽略的是：哪怕你写了 border-radius: 8px 和 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，如果父容器有 overflow: hidden 或图片在 flex 容器里没预留空间，阴影照样消失——得靠 padding、margin 或改容器 overflow 来兜底，不是调 shadow 参数能解决的。
