css制作白纸阴影

使用 box-shadow 属性实现白纸阴影效果

通过 CSS 的 box-shadow 属性可以轻松为元素添加阴影效果，模拟白纸的立体感。以下是一个基础实现方式：

.paper {
  background-color: white;
  width: 300px;
  height: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

多层阴影增强立体感

通过叠加多层阴影可以实现更真实的纸张效果，第一层控制硬边阴影，第二层控制柔和的弥散阴影：

.paper-layered {
  background: white;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15),
              5px 5px 10px rgba(0,0,0,0.1),
              10px 10px 20px rgba(0,0,0,0.08);
}

倾斜阴影效果

结合 transform 属性可以创造纸张被掀起的动态效果：

.paper-tilted {
  transform: rotate(2deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

内阴影模拟纸张厚度

使用 inset 参数配合外阴影可以模拟纸张边缘的厚度感：

.paper-thick {
  box-shadow: 0 0 20px rgba(0,0,0,0.1),
              inset 0 0 10px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
}

响应式阴影调整

通过媒体查询在不同设备上调整阴影强度：

@media (max-width: 768px) {
  .paper-responsive {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
}

这些方法可以根据实际需要组合使用，通过调整阴影的颜色、模糊半径和扩展范围来获得理想的纸张阴影效果。建议使用 RGBA 颜色值来控制阴影透明度，避免阴影过于生硬。