最轻量可控的图片暗角方案是用绝对定位::before伪元素叠加radial-gradient，需父容器设position:relative，伪元素设inset:0和pointer-events:none，并用150%–200%渐变半径适配缩放。
用 ::before 伪元素叠加径向渐变暗角
直接给图片加暗角，最轻量、最可控的方式就是用绝对定位的伪元素盖一层 radial-gradient。前提是图片容器得是相对定位上下文，否则 ::before 会相对于最近的定位祖先（甚至 body）偏移，位置完全失控。
常见错误现象：::before 跑到页面左上角、暗角只盖住左上四分之一、图片缩放后暗角不随动。
- 图片父容器必须设
position: relative（不能是static） -
::before设position: absolute，且top: 0; left: 0; width: 100%; height: 100% - 渐变用
radial-gradient(circle at center, rgba(0,0,0,0.6) 0%, transparent 70%)，70% 是关键阈值——太小则暗角收缩成黑点，太大则边缘过渡生硬 - 别忘了
content: ""，否则伪元素不渲染
background-blend-mode: multiply 能否替代伪元素？
可以，但不推荐用于暗角。它要求把图片本身当背景图（background-image），再叠一层渐变背景，然后靠混合模式压暗。问题在于：图片无法响应式等比缩放（background-size: contain 会拉伸渐变）、无法获取原生 <img alt="CSS如何用定位和伪元素给图片增加暗角滤镜效果_绝对定位的伪元素盖一层径向的黑色到透明的渐变" > 的语义和加载行为（如 loading="lazy"）、也不支持 object-fit 精确控制裁剪。
使用场景仅限于纯装饰性背景图，且你明确放弃 <img alt="CSS如何用定位和伪元素给图片增加暗角滤镜效果_绝对定位的伪元素盖一层径向的黑色到透明的渐变" > 标签的所有优势。
立即学习“前端免费学习笔记（深入）”；
- 如果图片是内容型（比如文章配图、用户头像），坚持用
<img alt="CSS如何用定位和伪元素给图片增加暗角滤镜效果_绝对定位的伪元素盖一层径向的黑色到透明的渐变" >+ 伪元素 -
multiply对浅色区域压暗效果弱，暗角浓度难统一 - IE 完全不支持
background-blend-mode，兼容性断层明显
暗角随图片缩放自适应的关键参数
伪元素尺寸写死 100% 不够，因为图片可能用 object-fit: cover 裁剪，或容器宽高比与图片不一致。此时暗角会盖住不该盖的区域，或漏出白边。
解决思路是让伪元素「撑满内容盒」，而不是「填满容器盒」：
- 给图片设
display: block（避免底部默认留白） - 伪元素用
inset: 0替代top/left/width/height，更简洁且语义准确 - 渐变半径改用
150%或200%（而非百分比位置），确保无论图片如何缩放，暗角始终从中心向外衰减 - 如果容器有圆角（
border-radius），伪元素也要同步加相同值，否则暗角会溢出圆角边界
性能和层级容易被忽略的坑
暗角本质是多一层渲染图层，但只要不触发重排，GPU 加速下开销极低。真正卡顿往往来自两个地方：伪元素没设 pointer-events: none，导致鼠标悬停失效；或者用了 box-shadow 类模拟暗角，结果模糊半径大时严重掉帧。
- 务必加
pointer-events: none到伪元素，否则图片上的点击、拖拽、右键全被拦截 - 避免用
filter: drop-shadow()模拟暗角——它对每个像素做高斯模糊，移动端尤其吃资源 - 如果页面大量图片同时应用该效果，建议用
will-change: transform提前提示合成器，但仅在必要时加（比如滚动中持续可见的图集） - 透明度别用
rgba(0,0,0,0.01)这类极低值——浏览器仍会渲染整层，实际毫无意义
暗角不是越浓越好，70%–85% 的扩散范围配合 0.3–0.6 的透明度，才是人眼觉得自然的临界点。调的时候盯着图片四角看，那里最容易暴露渐变断层或过度压暗。
