如何为div元素设置图片中所示的浅灰色阴影效果？

你可以用CSS渐变来模拟图中的浅灰色阴影效果，以下是两种实用的实现方式：

底部渐变阴影（常见场景） #

如果是元素底部的浅灰过渡阴影，用伪元素配合线性渐变就能实现：

/* 目标元素基础样式 */
.card {
  width: 320px;
  height: 180px;
  background: #fff;
  position: relative;
  /* 可选：添加圆角让效果更自然 */
  border-radius: 8px;
  overflow: hidden;
}

/* 伪元素实现渐变阴影 */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  /* 从浅灰过渡到透明，方向向上 */
  background: linear-gradient(to top, #e8e8e8, transparent);
}

四周内渐变阴影 #

如果需要元素内部四周都有浅灰渐变阴影，用多重线性渐变组合：

.card {
  width: 320px;
  height: 180px;
  /* 四个渐变分别覆盖上下左右边缘 */
  background: 
    linear-gradient(to bottom, #e8e8e8, transparent) top / 100% 12px no-repeat,
    linear-gradient(to top, #e8e8e8, transparent) bottom / 100% 12px no-repeat,
    linear-gradient(to right, #e8e8e8, transparent) left / 12px 100% no-repeat,
    linear-gradient(to left, #e8e8e8, transparent) right / 12px 100% no-repeat,
    #fff; /* 元素基础背景色 */
  border-radius: 8px;
}

自定义调整要点 #

• 修改#e8e8e8为你需要的浅灰色调
• 调整12px来控制阴影的厚度
• 若要外阴影，可修改伪元素的位置（比如bottom: -12px）或渐变方向

内容的提问来源于stack exchange，提问作者付慧涛