用box-shadow实现单向阴影需调节x/y偏移值及负扩展值，如右侧阴影用10px 0 8px -4px；底部悬浮用0 6px 12px -4px；左侧/顶部同理调符号；png等透明图推荐drop-shadow()，更贴合轮廓。
用 CSS 的 box-shadow 给图片加单向阴影最直接，关键在控制水平（x-offset）和垂直（y-offset）偏移值，配合模糊半径和颜色即可实现左、右、上、下等特定方向的阴影效果。
只显示右侧阴影
让阴影完全落在图片右边：x-offset 设为正数，y-offset 为 0，模糊半径不宜过大，避免向上下扩散。
img {
box-shadow: 10px 0 8px -4px rgba(0, 0, 0, 0.3);
}
-
10px：向右偏移 10 像素 -
0：垂直不偏移 -
8px：模糊程度适中 -
-4px：扩展半径为负，收紧阴影边缘，让效果更“贴边”
只显示底部阴影（常用悬浮效果）
这是最常用的单向阴影，模拟图片浮起的效果：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
img {
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.25);
}
-
0：无左右偏移 -
6px：向下偏移 6 像素 -
-4px扩展值能防止阴影向上“溢出”，让底部更干净
只显示左侧或顶部阴影
原理相同，只需调整 x/y 偏移符号：
- 左侧阴影：
box-shadow: -8px 0 6px -3px rgba(0,0,0,0.2); - 顶部阴影：
box-shadow: 0 -5px 8px -3px rgba(0,0,0,0.15);
注意：负的 y-offset 是向上偏移，负的 x-offset 是向左偏移；搭配负扩展值可进一步约束阴影范围，避免“晕开”到不需要的方向。
进阶：用 filter: drop-shadow() 更精准控制
如果图片有透明区域（如 PNG），box-shadow 会作用在整个矩形框上，而 drop-shadow() 只沿图片实际轮廓投射阴影，方向控制逻辑一致：
img {
filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.2));
}
- 参数顺序同
box-shadow：x y blur color - 优势：贴合图像形状，适合不规则或带透明背景的图
- 注意：不支持扩展（spread）参数，精细控制靠 blur 和 offset 配合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
