box-shadow比border更可靠，因其原生支持缩放跟随、自动贴合圆角（需配合filter: drop-shadow）、不改变盒模型，且现代浏览器兼容性无死角。
直接用 box-shadow + border-radius + 响应式单位就能实现，不需要包裹容器、不用 JS、也不必切图。
为什么 box-shadow 比 border + 阴影更可靠
很多人试图用 border 加深色再叠一层阴影来“模拟”投影，结果边缘生硬、缩放后错位、圆角处阴影还是方的。真正起作用的是 box-shadow 本身——它作用于元素渲染框，浏览器原生支持缩放跟随，且在现代浏览器中兼容性已无死角（IE10+ 全支持，2026 年基本可忽略 IE9）。
-
box-shadow的模糊半径和偏移值会随图片尺寸等比缩放，max-width: 100%或width: clamp(200px, 50vw, 400px)下依然自然 - 别把
box-shadow写在父<div>上：容易被overflow: hidden截断，或因父容器 transform 导致阴影渲染异常 - 图片默认是
inline元素，后面留白会导致底部多出几像素间隙——加display: block或vertical-align: top即可消除
border-radius 和阴影一起用时，圆角阴影不贴合？换 filter: drop-shadow()
当你给 <img> 同时设了 border-radius: 12px 和 box-shadow: 0 4px 8px rgba(0,0,0,0.2)，会发现阴影边缘仍是直角——因为 box-shadow 按原始矩形区域投射，不识别圆角裁剪。
- 正确解法是改用
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2))：它基于图像 Alpha 通道计算，自动贴合圆角轮廓 - 注意：
drop-shadow()不支持多层逗号分隔写法（box-shadow可以），也不能用inset - 滚动大量带
drop-shadow()的图片时，部分低端 Android 设备可能轻微掉帧；如遇此问题，可降级为box-shadow+clip-path: inset(0 round 12px)组合
响应式阴影参数怎么设才不糊不飘
固定像素值（如 box-shadow: 0 0 20px ...）在小屏上会显得过重，在大屏上又太淡。关键不是调颜色，而是让模糊半径随视口或字体基准动态变化。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
clamp()控制模糊值：box-shadow: 0 0 clamp(4px, 2.5vw, 16px) rgba(0,0,0,0.18) - 圆角也响应式：
border-radius: clamp(4px, 1.2vw, 10px)，避免小图圆角过大失真 - 慎用超大模糊值（>30px）：在移动端高 DPR 屏幕下易变成一团光晕，失去“投影”本意；优先调透明度（
rgba第四个参数）而非盲目加模糊 - 如果图片背景是深色，浅色阴影（如
rgba(255,255,255,0.15)）比默认黑灰更清晰
最常被忽略的一点：阴影是否“生效”，取决于图片有没有脱离文档流干扰。比如浮动（float: left）或绝对定位（position: absolute）后，box-shadow 仍正常，但若同时用了 transform: scale(0.95)，某些 Chrome 版本会截断阴影——此时加一行 transform: translateZ(0) 强制图层提升，问题即解。
