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动态计算卷边大小。
