用 linear-gradient 而非 clip-path 是因后者在部分 safari 中对伪元素支持不稳定且难控阴影与过渡；前者通过两层斜向渐变叠加，兼容性好，可自然实现折痕阴影和 hover 动画。
折角效果为什么用 linear-gradient 而不是 clip-path
因为 clip-path 在部分 Safari 版本中对伪元素支持不稳定，且难以精确控制折角阴影和过渡；linear-gradient 通过多层背景叠加，兼容性更好（Chrome/Firefox/Safari 均支持），还能自然实现「折痕阴影」和 hover 动画。关键在于把折角看作一个斜向的、带透明渐变的遮罩层，而不是裁剪形状。
核心实现：用两层 linear-gradient 模拟折角
折角本质是右上角一块斜向的三角形区域，需同时满足：① 背景色与容器一致（视觉上“被掀起来”），② 边缘有轻微暗影模拟折痕。推荐用两个方向相反的斜向渐变叠加：
background: linear-gradient(-135deg, transparent 12px, #333 0) no-repeat top right, linear-gradient(135deg, #f8f8f8 12px, transparent 0) no-repeat top right;
说明：
-
12px是折角大小，即三角形直角边长度，可按需调整 - 第一层渐变（
-135deg）生成深色折痕线，从透明突变为#333，形成阴影感 - 第二层渐变（
135deg）覆盖在上层，用容器背景色（如#f8f8f8）填充折角主体，透明部分露出下层 - 两层都定位在
top right，并设no-repeat，避免平铺干扰
必须设置的配套 CSS 才能正常显示
仅靠渐变不够，容易出现错位、溢出或响应失效：
- 父容器需设
position: relative，否则伪元素定位会脱离上下文 - 伪元素（如
::after）要设position: absolute+top: 0+right: 0+width: 40px+height: 40px（宽高至少 ≥ 折角尺寸） - 必须加
content: ""，否则伪元素不渲染 - 若需圆角容器，折角区域会露白——此时应在伪元素上加
border-bottom-left-radius: 4px（与容器圆角反向匹配）
hover 动画和移动端适配要注意什么
直接对 background 做 transition 无效（渐变色无法插值），正确做法是过渡 transform 或控制 opacity：
- 想让折角“翻起更明显”，可用
transform: rotate(2deg)配合transition: transform .2s - 想模拟纸张微抬，加
box-shadow: 2px -2px 6px rgba(0,0,0,.1)并只在过渡时增强 - 移动端点击区域小，建议给伪元素加
pointer-events: none，避免误触；真需要交互时，用z-index和透明background层承接事件 - 在高清屏（dpr > 1）下，
12px折角可能显得太细，可配合@media (-webkit-min-device-pixel-ratio: 2)改为16px
折角的“真实感”不在角度多精准，而在阴影层次和响应节奏——多一层渐变、少一个 position 忘记设，整个效果就浮在表面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
