纯 CSS 实现格子纸背景

在 决定下一步行动」，真正让待办清单为你所用 看到几张漂亮的手写字体插图。讨论区也都在问这几张插图是如何做出来的。

格子纸-图片来自少数派

用 Markdown 生成漂亮的手写图 (Mac Only) 一文用纯 CSS 实现了这个效果。一直使用 Windows 平台，就尝试在用纯 CSS 写一个类似效果。放大原图可看到一些噪点，让纸张的感觉更加逼真。噪点使用 NoisePNG 实现的。NoisePGN 是把背景当图片来处理，这里只是用纯 CSS 实现，所以只能是说近似原图效果。

代码如下：

<style>
        body {
            background-color: #F5F9F4;
            color: black;
            font-family: 翩翩体-简;
            font-size: large;
            background-size: 50px 50px, 50px 50px; /* grid size */        


            background-image:
                /* horizontal line */
                /* the first size is defines horizontal line,while the second defines transeparent */

                -moz-linear-gradient(90deg, gray 2px, transparent 2px),

                /* vertical line */
                -moz-linear-gradient(0, gray 2px, transparent 2px);

        }
    </style>

参考：css3pie