css制作卷边效果
使用伪元素和渐变实现卷边效果
通过 ::before 或 ::after 伪元素配合线性渐变，可以模拟纸张卷曲的视觉效果。以下是一个基础实现方案：
.box {
position: relative;
width: 200px;
height: 200px;
background: #f5f5f5;
overflow: hidden;
}
.box::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background: linear-gradient(-45deg, transparent 45%, #ddd 45%, #ddd 55%, transparent 55%);
}增加阴影增强立体感
在伪元素上添加阴影效果可以让卷边更逼真：
.box::after {
box-shadow: -2px -2px 5px rgba(0,0,0,0.2);
transform: rotate(45deg);
transform-origin: right bottom;
}使用 SVG 实现复杂卷边
对于更复杂的卷曲效果，可以嵌入 SVG 作为背景：
.box {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 100 L100 100 L100 0 Q80 20 0 100 Z" fill="%23ddd"/></svg>');
background-position: bottom right;
background-repeat: no-repeat;
background-size: 30px 30px;
}动态悬停效果
添加交互状态让卷边响应鼠标悬停：
.box:hover::after {
transform: rotate(45deg) scale(1.2);
transition: transform 0.3s ease;
}多角度卷边实现
通过调整伪元素定位和旋转角度，可以实现不同方向的卷边：
/* 左上角卷边 */
.box::before {
top: 0;
left: 0;
transform-origin: left top;
transform: rotate(-45deg);
}这些方法可以组合使用，通过调整颜色、尺寸和阴影参数来匹配不同设计需求。实际应用中可能需要根据具体场景微调参数值。
