css制作纸片

使用CSS制作纸片效果

通过CSS的box-shadow、transform和背景属性可以模拟纸片的立体感和材质。以下是一个基础的实现方法：

.paper {
  width: 200px;
  height: 300px;
  background-color: #fff9e6; /* 略带黄色的纸张底色 */
  box-shadow: 
    1px 1px 3px rgba(0,0,0,0.2), /* 主阴影 */
    5px 5px 10px rgba(0,0,0,0.1); /* 边缘模糊阴影增强立体感 */
  transform: rotate(2deg); /* 轻微旋转模拟自然摆放 */
  padding: 20px;
  position: relative;
}

添加纸张纹理效果

使用repeating-linear-gradient模拟纸张纤维纹理：

.paper-textured {
  background: 
    repeating-linear-gradient(
      0deg,
      #fff9e6,
      #fff9e6 1px,
      #fff1c8 1px,
      #fff1c8 2px
    );
}

实现边缘卷曲效果

通过伪元素创建卷边效果：

.paper-curl::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 50%,
    #f3e5c0 50%,
    #f3e5c0 100%
  );
  box-shadow: -2px 2px 3px rgba(0,0,0,0.1);
}

响应式阴影增强

根据设备特性调整阴影强度：

@media (prefers-color-scheme: dark) {
  .paper {
    box-shadow: 
      1px 1px 6px rgba(0,0,0,0.4),
      8px 8px 15px rgba(0,0,0,0.3);
  }
}

完整示例代码

<div class="paper paper-textured paper-curl">
  <p>这里是纸片上的内容...</p>
</div>

关键点在于通过多层阴影创造深度感，结合轻微变形和纹理细节增强真实度。可根据实际需要调整旋转角度、阴影大小和颜色饱和度。