css制作卷边效果

使用伪元素和渐变实现卷边效果

通过CSS伪元素（::before或::after）配合线性渐变（linear-gradient）可以模拟纸张卷边的立体感。以下是一个基础实现示例：

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #f5f5f5;
  overflow: hidden;
}

.box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, transparent 40%, #ddd 40%, #ccc 50%, transparent 50%);
}

增加阴影增强立体感

通过box-shadow和transform让卷边效果更逼真：

.box::after {
  /* 基础样式同上 */
  box-shadow: -3px -3px 5px rgba(0,0,0,0.2);
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

多角度卷边扩展

通过调整渐变角度和定位，可实现不同方向的卷边：

/* 左上角卷边 */
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(225deg, transparent 40%, #ddd 40%, #ccc 50%, transparent 50%);
}

动态悬停效果

添加交互效果让卷边可点击或悬停时展开：

.box::after {
  transition: all 0.3s ease;
}

.box:hover::after {
  width: 60px;
  height: 60px;
}

使用SVG实现复杂卷边

对于更复杂的卷曲形状，可以嵌入SVG作为背景：

.box {
  background-image: url('data:image/svg+xml;utf8,<svg>...path数据...</svg>');
}

关键点在于通过CSS的层叠特性组合渐变、阴影和变形，调整参数可获得不同弯曲程度的效果。实际应用中可能需要配合JavaScript动态计算卷边大小。