样张 01
栅格换站队
四个预设共用同一段 HTML，只有一行 CSS 在变。
:has()
壹号格
贰号格
叁号格
肆号格
伍号格
陆号格
grid-template-columns: repeat(3, 1fr)2fr 1fr 1fr1fr 2fr 1fr1fr;
gap: 1.6rem0.45rem;
星图 · 活页
纸上效果实验室
七张样张挨个试给你看：栅格、排印、折角、显影、拓印、便签、撕页。全是纸、墨和选择器摊出来的，只有一条脚本。
题记
把手法一张一张撕下来，贴在这一页上。
样品都还活着。你动它，它就有反应。
移一下光标，台灯会跟着走；灯下那行字才浮出来。
灯下压着上一版：三张纸、两个脚本，和一个没睡好的夜。
样张 02
排印实验台
三根尺子，把这段字调到你觉得舒服为止。
range
字距一松，纸上就空；行距一挤，气就短。排印说到底，是把空气分配到该在的地方。
样张 03
折一角
把纸角掀起来，反面的字就露出来了。
details
掀开纸角，看反面的字
折角是纸的记性：它记住上一页停在哪里，好让下一次从这里翻开。
details[open] .pl-fold-flap {
transform: rotate3d(1, 1, 0, -180deg);
}样张 04
墨迹显影
这行字等你滚到跟前，才一笔一笔落下。
view()
纸不急着干，字也不急着亮，落笔的地方先留着。
滚过去，再看一遍。
样张 05
拓印台
光标刷过的地方才显影，没刷到的还是白纸。
:hover
手帐刷过的地方才显影
用光标在纸上刷一刷，或点右上角「显影」。
样张 06
撕便签
把便签撕下来，它会浮到整页的最上面。
popover
便签会浮到整页最上层，压过外框和页脚。
便签
popover 让元素进浏览器顶层，不受外框裁剪，也不用一行脚本。撕下来、贴回去，都只是一个属性的事。
样张 07
撕开一层
沿齿线把纸撕开，下面压着另一张。
clip-path
下面这张是上一版：三张纸、两个开关，和一次没睡好的夜。