css制作白纸阴影

使用 box-shadow 属性

通过 CSS 的 box-shadow 属性可以轻松实现白纸阴影效果。该属性允许设置阴影的偏移、模糊、扩散和颜色。

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

调整阴影参数

阴影效果可以通过调整参数进行微调。box-shadow 的参数依次为：水平偏移、垂直偏移、模糊半径、扩散半径和颜色。

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

多层阴影增强效果

通过叠加多层阴影可以模拟更真实的纸张投影效果。每层阴影可以有不同的模糊和透明度。

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

使用伪元素实现立体感

通过 ::before 或 ::after 伪元素可以创建更复杂的阴影效果，模拟纸张边缘的厚度。

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

.paper::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.1);
}

响应式阴影效果

结合媒体查询可以为不同屏幕尺寸调整阴影强度，确保在各种设备上都有良好的视觉效果。

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

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

考虑边框和圆角

为白纸元素添加轻微的边框和圆角可以增强真实感，使阴影效果更加自然。

.paper {
  background-color: white;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

这些方法可以根据具体需求组合使用，创建出不同风格的白纸阴影效果。