css制作白纸阴影

使用 box-shadow 属性

在 CSS 中，box-shadow 是实现阴影效果的核心属性。通过调整其参数可以模拟白纸的阴影效果。以下是一个基本实现：

.paper {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

参数说明：

• 第一个值 0 表示水平偏移（X轴）
• 第二个值 4px 表示垂直偏移（Y轴）
• 第三个值 8px 表示模糊半径
• rgba(0, 0, 0, 0.1) 控制阴影颜色和透明度

多层阴影增强立体感

为创造更真实的纸张阴影，可以叠加多层阴影：

.paper {
  background-color: white;
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.15),
    0 2px 2px rgba(0,0,0,0.15),
    0 4px 4px rgba(0,0,0,0.15),
    0 8px 8px rgba(0,0,0,0.15);
}

内阴影模拟纸张厚度

配合 inset 参数可以创建纸张边缘的厚度感：

.paper {
  background-color: white;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.1),
    inset 0 0 40px rgba(0,0,0,0.05);
}

结合伪元素创造层次

使用 ::before 或 ::after 伪元素可以增强效果：

.paper {
  position: relative;
  background-color: white;
}

.paper::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0,0,0,0.1);
  z-index: -1;
  filter: blur(10px);
}

响应式阴影调整

通过媒体查询适应不同设备：

.paper {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
  .paper {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

这些方法可以根据实际需求组合使用，调整参数值可获得不同强度的阴影效果。