如何使用CSS为图片添加内阴影及底部内阴影？

一、基础内阴影实现 #

直接使用CSS的box-shadow属性并搭配inset关键字就能实现内阴影，但要注意：直接给<img>标签加内阴影通常看不到效果——因为图片本身会覆盖阴影，更稳妥的做法是借助容器承载图片，给容器添加内阴影：

.image-container {
  width: 300px;
  border-radius: 5%;
  overflow: hidden; /* 裁剪超出容器的内容，让阴影仅在容器内显示 */
  box-shadow: inset 10px 10px 5px rgba(255, 0, 0, 0.5); /* 用rgba设置半透明阴影更自然 */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 消除图片下方默认的空白间隙 */
}

二、底部内阴影实现 #

只需调整box-shadow的参数，就能把阴影集中在底部：

.bottom-inset-shadow {
  width: 300px;
  border-radius: 5%;
  overflow: hidden;
  /* 参数依次为：内阴影标识、水平偏移、垂直偏移、模糊半径、扩展半径、颜色 */
  box-shadow: inset 0 15px 10px -10px rgba(0, 0, 0, 0.3);
}

.bottom-inset-shadow img {
  width: 100%;
  height: auto;
  display: block;
}

参数细节说明：

• inset：固定标识为内阴影
• 第一个值0：水平方向无偏移
• 第二个值15px：垂直方向向下偏移，让阴影集中在底部区域
• 第三个值10px：控制阴影的模糊扩散程度
• 第四个值-10px：负数扩展半径，缩小阴影范围，避免阴影向上过度延伸
• 最后用半透黑色，适配大多数场景的视觉需求

替代方案：用背景图实现 #

如果不想额外加容器，也可以把图片设为元素的背景图，直接给元素加内阴影：

.image-as-bg {
  width: 300px;
  height: 200px;
  border-radius: 5%;
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 15px 10px -10px rgba(0, 0, 0, 0.3);
}

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