如何不添加父div仅用img标签和CSS类实现图片vignette效果

直接给.vignette类添加如下代码即可，不需要新增任何HTML标签：

.vignette {
  /* 可选：消除img作为行内元素的默认下方空隙 */
  display: block;
  /* 暗角核心：内阴影模拟边缘压暗效果 */
  box-shadow: 0 0 120px 60px rgba(0, 0, 0, 0.7) inset;
  /* 关键配置：解决img作为替换元素，内阴影被图片本身遮挡的问题 */
  clip-path: inset(0);
}

自定义调整方法 #

你可以根据想要的暗角效果调整参数：

• 调整阴影第三值（模糊半径，示例为120px）：数值越大，暗角和中心亮部的过渡越柔和
• 调整阴影第四值（扩散半径，示例为60px）：数值越大，暗角向图片中心覆盖的范围越大
• 调整阴影颜色的透明度值（示例为0.7）：数值越高，暗角颜色越深
• 如果图片设置了圆角（比如圆角值为8px），把clip-path属性值改为inset(0 round 8px)即可让暗角匹配圆角形状，避免直角穿帮

效果参考 #

这个方案兼容Chrome、Firefox、Safari等所有主流现代浏览器，完全不需要额外包裹父级div。直接给img标签加inset阴影默认不生效，是因为img属于替换元素，图片内容会绘制在盒模型阴影、背景的上层，直接加阴影会被图片完全盖住，加clip-path: inset(0)即可解决这个遮挡问题。

内容的提问来源于stack exchange，提问作者Marcel