用 CSS 做半调网点与套印错位

站点的视觉方向是孔版套印：两支油墨、全直角、粗线、硬偏移阴影。这套语言里最容易做坏的是网点——加多了像滤镜，加少了像没做。

我把网点拆成三个可以单独调的参数。

图：网点透明度决定它是纹理还是噪音；错位只用另一支油墨，同色叠加会发脏。

网点是角度、间距、透明度

真正的半调印刷是网点按固定角度排列的，常见 45°，因为斜排比正排更不容易出现摩尔纹。CSS 里可以这样拼：

.halftone {
  background-image: radial-gradient(
    circle at center,
    var(--ink) 0 1.2px,
    transparent 1.3px
  );
  background-size: 8px 8px;
  background-position: 0 0;
  transform: rotate(45deg);
  transform-origin: center;
}

用 radial-gradient 画一个点，靠 background-size 平铺，再整体转 45°。注意旋转的是整个元素，所以边缘会露出空白——要放在有 overflow: hidden 的容器里，或者把元素做得比容器大一圈。

透明度决定它是装饰还是噪音

网点最大的问题是压过文字。我的规则是：任何有正文的地方，网点透明度不超过 0.06。

站点用了一个令牌控制它：

:root {
  --halftone-opacity: 0;
}

[data-skin='riso'] {
  --halftone-opacity: 0.06;
}

默认的墨印皮肤直接把它关掉——不是每个方向都需要网点。这套令牌化的好处是：组件里只写 opacity: var(--halftone-opacity)，换肤时不用改任何调用点。

套印错位：偏移 2px，不模糊

第二支油墨叠在第一支上时，真实印刷会有微小的错位。CSS 里用两个叠加的 text-shadow 就能模拟，但有个前提：必须是两种颜色。

h1 {
  color: var(--ink-primary);
  text-shadow: 2px 2px 0 var(--ink-secondary);
}

如果两色相同，两层几乎重合的字会把边缘糊粗一圈，整行发脏——这是我在暗色主题下踩过的坑。后来定了规矩：重影只用另一支油墨，同色一律不加。

卡片阴影同理

硬偏移阴影（0 模糊）是这套视觉的骨架。用 box-shadow: 4px 4px 0 var(--ink)，不要用 0 4px 12px rgba(0,0,0,.1)——后者立刻变成「模板感」。

配套的是全直角：--radius-* 全部为 0。圆角加硬阴影的组合会自相矛盾，要么都软，要么都硬。

什么时候该停

网点、错位、硬阴影三件一起用，观感就满了。我的取舍是：

• 首屏最多一个网点区域，而且只在一侧
• 正文绝不铺网点
• 卡片只留硬阴影，不再叠网点

印刷感来自克制，不是来自把所有效果都打开。