HTML怎么做图片阴影效果_html CSS图片投影drop-shadow【参考】-html教程-PHP中文网

最直接用 filter: drop-shadow() 给加阴影，按图像 alpha 通道轮廓投影，不依赖父容器；区别于 box-shadow 的矩形盒模型投影，且不支持 inset 和多层逗号写法。

html怎么做图片阴影效果_html css图片投影drop-shadow【参考】

用 `filter: drop-shadow()` 实现图片阴影最直接

直接给 <img> 元素加 filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)) 就能出阴影，不依赖父容器、不破坏文档流，也不需要额外包裹标签。它和 box-shadow 的关键区别在于：前者作用于图像的**Alpha通道轮廓**（即按图片实际形状投影），后者只框住矩形盒模型。

常见错误是误以为 drop-shadow() 和 box-shadow() 参数完全一致——其实它没有 inset 关键字，也不支持多层逗号分隔写法（如 drop-shadow(...) drop-shadow(...) 在部分旧浏览器会失效）。

drop-shadow(x-offset y-offset blur-radius color) 四个参数必须按顺序，缺一不可
Chrome 117+、Firefox 115+、Safari 16.4+ 支持良好；IE 完全不支持，Edge 12–18 需加 -webkit- 前缀
对 PNG 透明背景或 SVG 图标效果自然；但对 JPG 等无透明通道图片，阴影仍按矩形边缘生成

为什么 `box-shadow` 有时比 `drop-shadow` 更可控

当图片被嵌在带圆角、裁剪或 overflow: hidden 的容器里，box-shadow 只作用于容器的可见区域，而 drop-shadow 仍按原始图像轮廓投射，可能穿出容器边界。这时候反而是老老实实用 box-shadow 更稳。

例如：<div class="card"><img src="..."></div>，给 .card 加 border-radius: 8px; overflow: hidden;，再给 .card 设 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，阴影就严格贴合圆角形状。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

box-shadow 支持 inset、多层阴影（用逗号分隔）、甚至负值偏移
它不受图片 Alpha 通道影响，JPG/PNG/SVG 表现一致
性能上，box-shadow 通常比 filter: drop-shadow() 开销更低，尤其在滚动或动画中

`drop-shadow` 在 SVG 内联使用时要注意语法位置

如果把图片写成内联 SVG（比如用 <svg><image href="..."></image></svg>），就不能在 <image></image> 标签上直接写 style="filter: drop-shadow(...)” —— 大多数浏览器不认。得把 filter 定义在 <defs></defs> 里，再通过 filter 属性引用：

<svg><defs><filter id="shadow"><fedropshadow dx="2" dy="2" stddeviation="2" flood-color="#000" flood-opacity="0.3"></fedropshadow></filter></defs><image href="icon.png" filter="url(#shadow)"></image></svg>

注意：<fedropshadow></fedropshadow> 是 SVG Filter 效果，不是 CSS；stdDeviation 对应 CSS 中的 blur-radius，但数值逻辑不同（越大越模糊），且不支持颜色透明度缩写，必须拆成 flood-color + flood-opacity。