css 的 box-shadow 属性可直接为图片添加淡灰色投影，无需额外标签或 javascript；基础写法为 img { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }，配合 display: block、border-radius 等可优化显示效果。

用 CSS 的 box-shadow 属性就能轻松给图片加淡灰色投影，不需要额外标签或 JavaScript。

基础写法：一行代码搞定

直接在图片的 style 或 CSS 类中添加：

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

img { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }

• 0：水平偏移（不左右偏）
• 2px：垂直偏移（阴影往下落 2 像素）
• 6px：模糊半径（值越大越柔和）
• rgba(0,0,0,0.15)：黑灰+15%透明度，就是淡灰色影子

让投影更自然的小技巧

如果图片有圆角或需要贴合容器，建议同时设置 display: block 和 vertical-align: middle 避免底部多出空白；再加 border-radius: 4px 让投影边缘也柔和些：

img { display: block; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

适配不同场景的常用参数组合

• 极简轻投影（适合卡片内小图）：0 1px 3px rgba(0,0,0,0.08)
• 标准清晰投影（通用推荐）：0 2px 6px rgba(0,0,0,0.12)
• 略带浮起感（按钮式图片）：0 4px 12px rgba(0,0,0,0.1)

注意：img 标签本身不支持 box-shadow？

其实完全支持——但前提是图片不能是行内元素默认行为干扰。若阴影没显示，大概率是因为：

• 图片被包裹在 a 或 span 里，父容器限制了溢出（加 overflow: visible）
• 图片设置了 vertical-align: baseline 导致底部留白遮挡阴影（改成 middle 或 top）
• 用了 max-width: 100% 却没设 height: auto，导致拉伸变形影响阴影渲染

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！