能否为CSS box-shadow添加颗粒纹理效果？

原生box-shadow不支持直接添加纹理效果，你之前给伪元素加box-shadow的思路不对——那是给伪元素本身加阴影，不是让阴影带纹理。正确的做法是用伪元素模拟带颗粒纹理的阴影，具体实现如下：

实现步骤 #

1. 给模态框容器设置相对定位，保留自身基础样式（不要加原生box-shadow）
2. 用:after伪元素生成一个比模态框大的“阴影层”，给这个层添加颗粒纹理+半透明底色，再通过模糊滤镜模拟阴影的模糊效果
3. 把伪元素放在模态框下方，实现阴影的层级关系

完整代码示例 #

HTML结构 #

<div class="modal">
  <!-- 模态框内容 -->
  <div class="modal-content">
    <h3>模态框标题</h3>
    <p>这是模态框的内容区域</p>
  </div>
</div>

CSS样式 #

/* 模态框容器：相对定位，控制整体位置 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; /* 确保模态框在阴影上方 */
}

/* 模态框内容：基础样式，无原生阴影 */
.modal-content {
  width: 400px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  z-index: 1; /* 确保内容在容器伪元素上方 */
}

/* 模拟带颗粒纹理的阴影 */
.modal:after {
  content: "";
  position: absolute;
  top: 10px; /* 阴影向下偏移量 */
  left: 10px; /* 阴影向左偏移量 */
  width: calc(100% + 20px); /* 宽度比模态框大20px（左右各10px） */
  height: calc(100% + 20px); /* 高度比模态框大20px（上下各10px） */
  background: rgba(0, 0, 0, 0.6) url('grain.jpg') repeat; /* 半透明黑+颗粒纹理 */
  background-size: 320px 320px; /* 纹理图尺寸 */
  filter: blur(8px); /* 阴影模糊程度 */
  border-radius: 8px; /* 和模态框圆角匹配 */
  z-index: -1; /* 把阴影放在模态框下方 */
  pointer-events: none; /* 不干扰模态框的交互 */
}

关键细节说明 #

• 调整top/left的偏移量、width/height的增量，可以控制阴影的扩散范围
• 修改rgba()的透明度和filter: blur()的数值，能调整阴影的深浅和模糊度
• 颗粒纹理图建议用无缝重复的小图，避免出现拼接缝隙
• 如果需要阴影向四周均匀扩散，把top/left设为负数，同时增大宽高的增量即可

内容的提问来源于stack exchange，提问作者opium-opiumoo