纯CSS3模拟维基百科档案纸张：伪元素与渐变实现卷角效果

简介：面向网页前端开发学习者与设计爱好者，该代码演示了仅借助CSS3技术实现维基百科风格档案纸张卷角效果，交互集中在纸张右上角，鼠标悬停时边角自然卷起，赋予页面复古纸质质感与流畅细节。压缩包共5个文件，包括1个可直接运行的HTML示例页、2张PNG与2张JPG辅助图片，整体仅763KB，结构清晰、轻量易部署。目前已有272人学习下载，适合作为博客卡片、个人作品集或知识库页面的趣味视觉点缀，也可嵌入文档模板或历史专题页面作为装饰元素。阅读源码，可重点研究CSS3伪元素、线性渐变、圆角、阴影与过渡动画的组合运用，理解不依赖JavaScript实现卷曲交互的思路；对于中初级前端开发者，这是一份便于拆解和二次改写的特效练习样本，也可据此延伸折角、撕纸等纸质感UI效果。效果依赖现代浏览器特性，建议在火狐或Chrome中打开示例以完整呈现卷角动画。

1. 纯CSS3模拟维基百科档案纸张：一份能直接用的视觉方案

场景：你正在做一个面向知识管理的 Web 项目，页面里需要展示一批历史档案。设计稿上，每张档案纸的右下角都有一个极薄的卷边，纸张像被手指轻轻掀过，带着微妙的阴影和弧度。这个效果用图片素材做不难，但档案区要渲染二三十张卡片，切图、压缩、适配深浅背景就全是后续成本。纯CSS3的实现方式，是把每张纸的卷角直接用伪元素、渐变和 transform 渲染出来，不增加一个 DOM 节点，不加载一张位图，颜色和尺寸全部由 CSS 变量控制。这是典型的 Web 开发源代码场景：一份 HTML(CSS) 源代码资源，摘出来就能用、能改、能适配。

这套资源适合前端开发、页面重构和原型设计这几类人。只要你不是第一次碰 CSS，跟着后面的参数调一遍，基本能在半小时内把效果落到自己的项目里。我下面会把原理、完整代码、踩过的坑和一版可交互的进阶玩法一次讲透，很多细节是照着官方文档未必能体会到的。

2. 卷角效果的底层原理：一张纸如何被两个伪元素撑起来

2.1 把“纸张卷角”拆成 CSS 能表达的三个图层

要用 CSS 还原纸张卷角，第一件事是把视觉现象拆开。一张纸卷起右下角后，你实际看到的不是一个局部圆角，而是几层相互叠加的信息：基底的纸面、卷起后露出的背面、角上的受光高光、落在纸面上的阴影，以及纸张本身因为弯曲产生的轻微形变。如果只用一个 border-radius 去糊弄，出来的效果是“圆滑的方块”，不是“被掀起的纸张”。

我习惯把卷角效果拆成三个绘图层来管理。第一层是纸张基底，也就是内容盒子本身，负责承载文字和背景色；第二层是卷角本体，用 ::after 伪元素实现，尺寸缩小到只留下一个三角形区域，负责把角落“翻”起来；第三层是阴影和高光，用 ::before 伪元素配合 filter 或 box-shadow 实现，负责让翻起的角度产生真实的投影关系。三个图层只要两个伪元素就能全部承载，不必动 HTML 结构。这类档案列表往往包含大量重复卡片，每少一个真实 DOM 节点，就意味着少一次布局计算和绘制合成，页面在低端移动设备上的表现会更稳定。

这里先记住一个关键前提：伪元素定位用的是绝对定位，父级必须有 position: relative。很多人第一步就把伪元素写了却忘了父级定位，卷角跑到浏览器窗口边缘去，回头查代码找半天。这个坑我会在第四章展开，先记下结论。

2.2 三种常见 CSS3 卷角形态：折角、卷角和微拱角

做页面效果久了就会知道，CSS 里面“卷角”其实是个词根，底下分三种常见形态，不同业务场景选型完全不一样。

第一种是折角，也叫 dog-eared fold，纸张像被硬折了一次，留下锐利的对角线折痕，视觉上偏硬朗。实现上可以给伪元素填充以对角线为边界的两段式 linear-gradient，再在折痕位置加一条半透明细线辅助。第二种是卷角，也就是这份资源要重点还原的形态。它的特征在于边缘呈弧线过渡，角下能看到纸张背面的颜色或半透明阴影，像手指捏着边缘轻轻拧了一下。视觉上需要用径向渐变来铺出弧面过渡，再用边框三角形作为基础几何形状。维基百科档案纸张那个经典效果，大多数实现都沿这个方向走。第三种是微拱角，纸张边缘没有明显翻起，只有一条很窄的阴影带着视觉错觉，像纸因温度和湿度轻微上翘，实现最简单，只要 box-shadow 配合浅渐变就够。

三种形态没有绝对优劣，关键在于内容气质。我曾经在一个政务类项目里用了微拱角，被设计否决后换成折角，原因是折角跟图章式排版更贴合。参数能微调，大方向不能选错。

2.3 光影节奏是“纸感”的分水岭：透明度与方向怎么取值

很多人照着教程写完代码，效果一眼假。问题不是代码写错了，而是光影节奏不对。真实纸张卷起来以后，角的正反两面形成两片对比区：受光面被环境光照亮，透明度偏高，因为纸薄会透光；背光面靠近纸面交界处暗下去，透明度偏低。这两个区域的过渡带大约占整个卷角的 15% 到 20%，太窄则生硬，太宽则糊成一团。

我常年用的安全参数是这样一组：受光面渐变从 rgba(255,255,255,0.85) 起步，收在 rgba(255,255,255,0.25)，覆盖卷角弧面；背光面从 rgba(0,0,0,0.12) 渐隐到 rgba(0,0,0,0.02)，负责制造翻折处的暗部压力线；整张纸的氛围投影用 box-shadow 承担，而角的投影单独用 filter: drop-shadow 来生成，这样阴影不会因为盒子的矩形边界而穿帮。

需要注意，渐变方向不是固定值。卷角在右下角时，受光面渐变应该从右上往左下推；卷角挪到左上角时，方向要整体对称变换。很多人只改角的位置，不改渐变方向，导致光影跟翻卷方向矛盾，看起来像是光从两个方向同时打过来。判断方向有一个很直接的笨办法：让渐变箭头始终指向纸张中心，也就是始终指向翻卷的反方向，这样模拟的是环境光从纸张整体区域洒过来的效果。

3. 从零搭一张档案纸：DOM 结构、核心样式与参数调优

3.1 从档案页抽象出的 HTML 结构

写代码之前先定结构。我不会让卷角效果迁就一段随意的 markdown，而是按典型档案卡片来组织，把标题、正文、状态标识、日期这些业务元素放进去，这样资源拿回项目里能直接替换内容使用。下面这份结构是常见的档案纸卡片写法：

<article class="paper-doc"> <header class="paper-doc__head"> <span class="paper-doc__tag">存档</span> <h2 class="paper-doc__title">档案纸张组件演示</h2> <time class="paper-doc__date">2024-05-18</time> </header> <div class="paper-doc__body"> <p>这是一段用于验证排版效果的示例内容。纸面底色、字号行距、段落间距都会影响整体观感，所以请保留纸面区域的留白空间。</p> </div> <footer class="paper-doc__foot"> <span>编号：ARCH-2024-0518</span> </footer> </article>

结构的核心逻辑是把内容按 header、body、footer 划分，卷角相关的两个伪元素都挂在最外层 article 上。这样无论内部文字如何增减，卷角定位都不会受内容高度变化的影响，这是组件化开发里最省心的一点。

结构参数说明：.paper-doc 是容器，宽度、字号、内边距统一从这里控制；.paper-doc__head 里的 tag 用来放“存档”“归档”之类的状态标识，视觉上是一个小色块；.paper-doc__body 承载主要文字，行高建议设在 1.6 到 1.8 之间，因为纸面效果对文字密度很敏感。如果某个卡片文字量特别大，建议在 body 上设置 max-height 后配合 overflow:hidden，防止内容顶破纸面的视觉边界。

3.2 CSS3 核心实现：从底色、双层伪元素到卷角参数

接下来进入正题。先给完整样式，我再逐段拆解参数：

.paper-doc { position: relative; width: 320px; padding: 20px 24px 16px; background: linear-gradient(145deg, #faf3e8 0%, #f5ead6 100%); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08); font-family: "Georgia", "Songti SC", serif; line-height: 1.7; color: #3a3530; } /* 卷角本体：边框三角 + 纸张背面颜色 */ .paper-doc::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-width: 0 0 34px 34px; border-style: solid; border-color: transparent transparent #d9c9a7 transparent; border-radius: 0 0 0 10px; filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.15)); } /* 高光层：纸张翻折后的受光面 */ .paper-doc::before { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-width: 0 0 28px 28px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.28) transparent; border-radius: 0 0 0 8px; }

这段代码的核心在 ::after 的边框不等宽设置。border-width 取值 0 0 34px 34px，意思是右边的边框宽度为 0，底部为 34px，左边为 34px，本质上是用边框构造出一个直角三角形，斜边朝向纸张中心，实色部分露出档案纸的底色 #d9c9a7，视觉上就是卷起的纸背。

高光层 ::before 与卷角本体 ::after 错位叠加，两层同向三角形大小不一致时，底层露出的细小边缘自然形成弧面过渡，这是“纸感”而不是“纸片感”的关键。border-radius 初看没起多大用，但当你把三角形斜边预先磨出弧度，就能获得非常细微的卷曲轮廓，这个值建议在 8px 到 14px 之间反复调试。

参数说明：border-width 底部与左侧两个值控制卷角大小，34px 在 320px 宽的卡片上约占总宽度的 10%，肉眼看着舒展。小于 20px 会像裁切失误，大于 44px 则会抢占正文阅读空间。drop-shadow 作用于三角形边界，制造卷角离开纸面的悬浮感；如果去掉 filter，卷角会像贴纸一样平贴纸面，整个效果就废了一半。

3.3 两个实战适配：偏黄底色与流式宽度

第一个适配场景是偏黄旧纸。维基百科的档案里不少是存放了几十年的资料，底色由米白变成偏黄。此时把 background 改成 linear-gradient(145deg, #e8d5a3 0%, #dccb8f 100%)，同时将 ::after 的 border-color 底部值改成从底色推导出的较深一档颜色 #c9b47c，::before 高光的起始透明度从 0.28 下调到 0.18，防止高光过强，让纸面看起来像塑料反光。

第二个场景是流式宽度。如果档案卡不是定宽 320px，而是跟随栅格自适应，那固定 34px 的卷角在小屏上就会显得笨重。常见做法是改用 clamp 让卷角随视口缩放：

.paper-doc::after { border-width: 0 0 clamp(18px, 8vw, 34px) clamp(18px, 8vw, 34px); }

这里的 clamp 函数把卷角尺寸约束在 18px 到 34px 之间，随视口宽度线性变化。但注意 vw 单位参照的是整个视口，如果组件嵌在较窄的侧边栏而非全屏内容区，建议把 8vw 改成与容器宽度相关的百分比，例如 10% 配合 calc 使用。现代浏览器对 calc 与 clamp 嵌套的支持已经很稳定，移动端问题不大。

4. 这些坑我替你踩过：卷角效果常见问题与排查

4.1 伪元素设置了，页面上却没有卷角

最常见也最挫败的排查场景。代码明明写在 ::after 里，浏览器审查元素也看到伪元素存在，但页面上空无一物。原因之一是遗漏了 content 属性，伪元素如果没有 content:""，哪怕设置了 width、height、border，浏览器也不会渲染任何几何形状。原因之二是父级没有 position: relative，绝对定位的伪元素脱离到了最近的定位祖先上，而那个祖先可能是 body 或某个外层容器，卷角自然就出现在你根本看不见的位置。

解决方式非常固定。第一步打开 DevTools，确认 content 是否为双引号空串；第二步检查选择器的定位上下文，给 .paper-doc 补上 position: relative。我现在写卷角样式时，永远把 content:"" 与 position:relative 当成一组配套写法，二者缺一个，效果就少一半。

4.2 卷角出现了一个小缺口，像是斜边被切掉

这个坑常在给卡片整体设置 border-radius 之后出现。卡片设了 4px 圆角，而卷角三角形正好贴在右下角，父级圆角把三角形最尖的那个点切掉，形成一条突兀的白色缺口。

原因在于 border-radius 作用于盒子的背景裁剪，而卷角伪元素三角形的绘制区域与卡片圆角的曲线相交。解决方式是把 ::after 的右下角也补上相同数值的圆角：border-radius: 0 0 4px 4px，让三角形贴边时刚好跟卡片圆角曲线重合。注意这里 4px 不是固定值，必须与父级盒子的 border-radius 保持同步，换主题时两处一起改。

另一个思路是把卷角整体往内收 2px，也就是 right: 2px; bottom: 2px，这会让卷角避开圆角边界，但它同时改变了悬浮高度，需要重新调 drop-shadow 的偏移方向。我自己的项目里两种方案都用过，优先推荐在三角形上补圆角，实在不行再往内收。

4.3 卷角像一块硬纸板，完全没有柔和的弧度

这种问题的最大特征是没有弧面光影，只看到一块纯色三角形贴在纸角上。看似复杂，原因却很直接：::after 中只设置了纯色 border-color，没有叠加从亮到暗的渐变过渡层。border 本身不能直接填渐变，所以要么靠 ::before 的高光做出过渡，要么换一种方案，用 background: radial-gradient 的方式来绘制三角形，后者参数更多，但可控性也更强。

我一般会优先用前者。当 ::before 白色半透明层从 0.28 逐级降透明，再加上 border-radius 磨边，弧面感立刻就会出现。这里有个判断经验：如果渐变做了仍然生硬，把 ::before 的 border-radius 从 8px 提升到 12px，并让高光三角形比 ::after 小 4px 到 6px，这个差值就是弧面的视觉宽度。差值太大，阴影感不足；差值太小，弧面又变成一条硬线。

4.4 hover 放大时卷角撕裂，跟主体错开

这是做交互进阶时候的典型问题。想做成 hover 时卷角变大，但 transform: scale() 放大的是整个伪元素，于是角的位置和朝向全乱了，像一张贴纸被同时从三个方向拉扯。

原因在于 transform-origin 没有同步调整。伪元素缩放必须以卡片右下角为固定原点，否则放大过程会带动它向纸张中心漂移。解决方式是把 transform-origin 设置为 100% 100%，并确保伪元素的 right 与 bottom 都固定在 0。另一个值得记住的细节是：不要在 hover 时同时修改 border-width 和 transform，两个属性一起改会跳变。正确做法是固定 border-width，用 scale 动画来模拟卷角变大，动画由 transition 接管。

4.5 卷角挡住了文字，还干扰用户选择复制

当卡片内容恰好排到角落时，34px 的卷角会遮挡正文。尤其在移动端，手指点击角落区域时，触发的是伪元素的命中区域而不是文字区域，用户复制文字会发现选中范围莫名断裂。

原因是伪元素虽然只画了三角形，但它仍然参与布局占位，并默认响应鼠标与触摸事件。解决方式是在 ::before 和 ::after 上同时加上 pointer-events: none，让它们彻底退出事件命中。同时检查 .paper-doc__body 的底部留白，最好给 padding-bottom 留出至少 34px 的空间。没有这层留白，卷角盖住文字几乎是必然的，这类问题在业务验收时往往会被当成 bug 打回来。

5. 从静态到交互：让卷角跟着鼠标“翻起来”

5.1 用 transition 模拟纸张的物理回弹

卷角做成静态后，下一步通常是让它响应用户动作。最常见的目标是 hover 时卷角稍微变大，表现出“手指掀纸”的感觉。这个效果不需要 JavaScript 参与。

在 ::after 和 ::before 上分别添加 transition 即可：

.paper-doc::after, .paper-doc::before { transition: transform 0.25s ease-out, filter 0.25s ease-out; } .paper-doc:hover::after { transform: scale(1.15); filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.2)); } .paper-doc:hover::before { transform: scale(1.1); }

参数的逻辑在于两层伪元素的 scale 值并不同步。1.15 与 1.1 的差值让弧面宽度在放大过程中随着卷角一起扩展，而不是产生重叠错位。transition 时长 0.25s 处于一个“不慢不飘”的区间，ease-out 曲线让动画在开始时速度快，接近结束时减速，正好模拟了纸张从掀起到停顿的物理惯性。

如果你想更进一步，可以在 hover 时把纸面盒子的 box-shadow 也加深一档，比如从 0 4px 12px 调整为 0 6px 16px，这样纸角被揭开时整张纸都像跟着浮起，层次感完整很多。注意这组值的过渡时间不要太长，否则整张纸的“浮起”会比卷角显得迟钝。

5.2 多张纸叠放：用 rotate 与 z-index 构建档案堆

做单张卡片容易，做成一组呈现叠放效果才是业务里的常态。维基百科类的资料区往往会同时展示多份档案，每份都有几乎一样的卷角，这时需要靠纸张前后错开来制造景深感。

常见做法是给每张卡片设置轻微的旋转角与位移偏移：

.paper-doc { position: relative; } .paper-doc:nth-child(1) { z-index: 3; transform: rotate(-1deg) translateY(0); } .paper-doc:nth-child(2) { z-index: 2; transform: rotate(1deg) translateY(-4px); } .paper-doc:nth-child(3) { z-index: 1; transform: rotate(-0.5deg) translateY(-6px); }

参数说明：rotate 的微小旋转打破了规则排列的呆板感，但角度不要超过 2 度，否则正文阅读会受影响。translateY 的负值让每张纸向上叠加，数值越大叠放感越强。z-index 的分配要让最上层纸张的索引最高，否则它的卷角阴影会被下一张纸盖住，视觉上就会出现“纸叠反了”的错觉。

5.3 纯 CSS 状态切换够不够用：什么时候加少量 JS

我经常被问到，纯 CSS 的 hover 事件能不能覆盖全部交互。大多数场景可以，但有两个例外。第一，组件需要在点击后维持“被翻开”的状态，而不是 hover 离开就立刻复原；第二，需要根据数据内容决定是否展示卷角，比如某些档案被标记为“原件受限”时不显示翻卷效果。

第一种情况可以使用 :focus-within 在纯 CSS 里模拟按压后的状态，给卡片内的可交互元素加上 tabindex 后，.paper-doc:focus-within::after 就能触发持续展开。但前提是卡片内部要有可聚焦元素。第二种情况必须引入少量 JS，做法是给某个容器加 class，再用 CSS 变量切换卷角组件的关键参数，比如卷角存在时设置 --corner-opacity: 1，不存在时设置为 0。视觉变化完全交给 CSS transition 处理，JS 不碰绘制逻辑，项目复杂度可以保持在很低的位置。

6. 交付前最后一道工序：用几个基准验证卷角效果

6.1 像素、性能与质感的自检清单

我每次做完一个纯 CSS3 组件，不会急着去截效果图，而是先打开三个自检维度。这一套虽然是上手活，但每次都帮我拦住过问题。

性能这个维度最容易被忽略。卷角组件在页面里渲染 30 张卡片，如果每张都因为 filter 动画占用独立合成层，滚动时就会明显卡顿。我的处理方式是优先用 transform 动画替代 filter 动画，把 drop-shadow 的过渡改为预置两层不同阴影的状态切换，而不是每一帧都让浏览器重算阴影。

质感这条我踩过真实的坑。有一次在偏黄的旧纸底上直接套白色高光，渐变边缘在 200% 缩放下一圈杂边，最后发现是渐变的结束色没跟底色对齐。现在每次换底色，我都会重新推导一遍高光起始透明度，而不是沿用米白纸张的参数。

6.2 移动端 Safari 和 Chrome 各过一遍

最后一个习惯是跨浏览器验证。Chrome 对 border-radius 与 drop-shadow 的像素取整和 Safari 不同，桌面端正常的效果，到移动端 Safari 上经常在关键位置穿帮。尤其是 drop-shadow 的偏移方向，Safari 对负值处理会有细微差异，卷角阴影容易多出一截。

从那以后，我每次交付前都会强制走一遍这套流程：先把合成层调顺，再做深浅背景适配，最后确认卷角方向与光源一致。这套卷角的实现和参数你已经有了，卡壳的地方回头翻第四五六章基本都能找到答案。希望帮到你。

本文还有配套的精品资源，点击获取