纯 css 折纸角效果需用两层 linear-gradient 叠加：底层 135° 浅色阴影，上层 -45° 深色翻起面，均锚定 bottom right 并通过 background-size 控制折痕大小，分层确保立体感与边缘过渡。
用 linear-gradient 在卡片右下角画出折纸翻起效果
折纸角本质是两个叠加的三角形：底层浅色模拟阴影，上层深色模拟翻起的纸面。不用图片、不依赖伪元素，纯 CSS 就能实现，关键是把 linear-gradient 当作“画布”来用。
核心思路是用多个背景图层（background-image）叠加，每层一个 linear-gradient，分别控制位置、角度和尺寸：
-
linear-gradient(135deg, #ccc 0%, #ccc 50%, transparent 50%)—— 右下角 45° 斜切阴影，占角部小块 -
linear-gradient(-45deg, #333 0%, #333 50%, transparent 50%)—— 翻起的深色纸面，旋转后对齐阴影边缘 - 两层都用
background-position: bottom right锚定在右下，并通过background-size控制“折痕大小”，比如24px 24px
为什么不能只用一层 linear-gradient
单层渐变最多画出一个斜边，但真实折纸角需要明暗交界——阴影区+高光/深色翻起区。只用一层会丢失立体感，看起来像被裁掉一块，而不是“纸被掀起来”。
常见错误现象：background: linear-gradient(-45deg, transparent 50%, #333 50%) 直接铺满整个角落，结果深色区域过大，边缘生硬，没有过渡。
- 必须分层：一层做“底边压暗”，一层做“翻起表面”
- 两层的
50%对齐点要一致，否则出现错位白缝 - 推荐用
transparent而非white做渐变终点，避免换主题色时漏显
适配不同尺寸卡片的 background-size 控制技巧
折角大小不能写死成像素值，否则小卡片上显得突兀，大卡片上又看不清。更稳妥的方式是结合 em 或视口单位，或用 CSS 自定义属性动态调节。
- 固定小角：用
background-size: 1.5em 1.5em，随字体缩放，适合文字为主卡片 - 响应式角：用
background-size: clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px) - 若卡片有
border-radius，折角会和圆角打架——必须确保background-clip: padding-box（默认值），且不要设overflow: hidden，否则裁掉渐变
IE 和旧 Safari 下失效怎么办
linear-gradient 多背景叠加在 IE11 及更早版本完全不支持；iOS background-size 多值语法兼容性差。不是所有项目都需要保，但得知道断点在哪。
- 检查是否真需支持：多数现代管理后台、移动端 H5 已可放弃 IE
- 降级方案：用伪元素
::after+transform: rotate()模拟，但增加 DOM 负担和定位复杂度 - 若必须兼容，建议改用 SVG
<clippath></clippath>或内联 base64 图片，反而更可控
真正容易被忽略的是：渐变层顺序和 background-origin 默认值。如果卡片加了 padding，而你没显式写 background-origin: border-box，折角可能偏移——它默认从 padding box 开始画，不是从角落物理点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
