最直接的CSS立体阴影写法是用多层box-shadow模拟光源方向，或用filter:drop-shadow()贴合图片轮廓；需注意display设置、参数比例及透明度协调。
图片加立体阴影最直接的 CSS 写法
不用 JavaScript，不依赖框架，纯 HTML + CSS 就能做出有纵深感的立体阴影。关键不是用 box-shadow 简单叠一层，而是模拟光源方向、分层叠加阴影来制造“浮起”效果。
-
box-shadow必须设多个值：水平偏移、垂直偏移、模糊半径、扩散半径、颜色 —— 少一个参数就容易扁平化 - 推荐至少两层阴影：一层贴近图片底部（小偏移 + 小模糊），一层稍远（更大偏移 + 更大模糊），比如：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 10px 25px -5px rgba(0,0,0,0.1) - 别忘了给图片加
display: block或vertical-align: bottom，否则默认 inline 会留出文字基线空隙，让阴影看起来“悬空不落地”
为什么 filter: drop-shadow() 有时比 box-shadow 更自然
drop-shadow() 是滤镜，它沿着图片轮廓投射阴影，对圆角、透明 PNG 边缘更贴合；box-shadow 是盒子投影，只认矩形边界。如果你的图片带透明背景或裁切为 border-radius: 50%，用 drop-shadow() 阴影才不会“溢出”到不该有的位置。
- 写法示例：
filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15)) - 注意：它不支持 inset，也不能像
box-shadow那样写多层逗号分隔 —— 想多层就得套两层<div>分别加滤镜 - 性能上略重于
box-shadow，但现代浏览器基本无感；旧版 Safari（-webkit-filter 前缀
图片悬浮时增强立体感的关键动作
真正体现“精致”的地方，往往在交互态：鼠标移上去，阴影变深、图片微抬，才让人觉得它可触、有重量。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
:hover触发变化，但避免只改box-shadow颜色 —— 要同步加大偏移和模糊值，例如从0 4px 6px变成0 12px 16px - 配合
transform: translateY(-2px)让图片上浮，注意必须加transition: all 0.2s ease，否则跳变生硬 - 别忽略
overflow: hidden在父容器上 —— 否则阴影在 hover 放大时可能被裁掉
移动端适配时容易漏掉的细节
PC 上看着立体的阴影，在手机上常显得过重、糊成一团，不是代码错了，是像素密度和视口缩放导致的渲染差异。
立即学习“前端免费学习笔记（深入）”；
- 用
rem或em写阴影尺寸（如0 0.25rem 0.375rem），比固定px更适应不同屏幕 - iOS Safari 对
filter的硬件加速更激进，有时会导致阴影边缘闪烁，加backface-visibility: hidden或transform: translateZ(0)可缓解 - 真机调试时关掉“减少透明度”系统设置（iOS 设置 > 辅助功能 > 显示与文字大小），否则
rgba()阴影会变灰白失真
立体感不来自参数堆砌，而来自阴影与图片距离、模糊度、颜色透明度三者的比例关系。调的时候盯着一张图反复看 10 秒，比查 10 个教程更管用。
