img是替换元素，不支持::before/after伪元素；需用父容器（如div）设position:relative，再对容器使用::before并设置content、绝对定位和遮罩样式。
为什么直接对 <img alt="如何在CSS中使用::before为图片添加阴影遮罩" > 使用 ::before 无效
因为 <img alt="如何在CSS中使用::before为图片添加阴影遮罩" > 是替换元素（replaced element），默认是 inline 级别，且不生成伪元素的渲染上下文——::before 和 ::after 在它上面不会显示。浏览器会忽略，连布局都不参与。
常见错误现象：img::before { content: ""; box-shadow: 0 0 10px rgba(0,0,0,.5); } 完全没反应，控制台也无报错。
- 必须将
<img alt="如何在CSS中使用::before为图片添加阴影遮罩" >包在块级容器中（如<div> 或 <code><figure></figure>） - 该容器需设置
position: relative，为伪元素提供定位锚点 -
::before必须有content（哪怕为空字符串），否则不渲染
正确写法：用父容器 + ::before 叠加遮罩阴影
核心思路是让伪元素覆盖在图片上方，通过半透明背景或模糊滤镜模拟“阴影遮罩”效果，而非给图片本身加阴影。
.img-container {
position: relative;
display: inline-block;
}
.img-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.2), transparent 70%);
pointer-events: none;
}
-
pointer-events: none确保鼠标事件穿透到图片，不影响点击/拖拽 - 用
radial-gradient比纯box-shadow更可控，能做出聚焦式暗角遮罩 - 若要模拟投影感，可叠加
filter: blur(4px)配合透明度，但注意性能开销
box-shadow 和 filter: drop-shadow() 的关键区别
很多人误以为给伪元素加 box-shadow 就是“图片阴影”，但实际效果取决于伪元素形状——如果伪元素是矩形满盖，阴影只是绕容器边缘；而 drop-shadow() 作用于内容 Alpha 通道，更贴合图片轮廓。
立即学习“前端免费学习笔记（深入）”；
- 伪元素上用
box-shadow: 0 4px 12px rgba(0,0,0,0.3)→ 阴影是方框轮廓 - 伪元素上用
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3))→ 阴影跟随图片透明区域（如 PNG 裁切边） -
drop-shadow()不支持inset，且旧版 Safari 对多层 filter 支持不稳定
响应式场景下容易被忽略的尺寸同步问题
当图片设为 max-width: 100% 或使用 object-fit 时，伪元素若用 top/left/right/bottom: 0，可能因父容器 padding、border 或盒模型计算偏差导致错位。
- 确保父容器
box-sizing: border-box - 避免在父容器上设
padding，改用内边距由伪元素自身控制（如margin或transform微调） - 图片高度不确定时，慎用
height: 100%—— 推荐用aspect-ratio配合overflow: hidden防止伪元素溢出
