如何只用 CSS 制作网格?

来源:how-to-make-a-grid-like-graph-paper-grid-with-just-css

在看 用于打印到纸张的 CSS 这篇文章时,对其中的网格比较好奇,作者提供了 stackoverflow 的链接,就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式,贴在下面展示。

样式1

效果图:

样式代码:

html 复制代码
<!DOCTYPE html>
<html>
<style>
html
{
    width: 100%;
    height: 100%;
    background-color: lightblue;

    background-size: 1cm 1cm;
    background-image:
      linear-gradient(to right, grey 1px, transparent 1px),
      linear-gradient(to bottom, grey 1px, transparent 1px);
}
</style>
<body>
    <h1>Sample text</h1>
    <h2>Sample text</h2>
    <h3>Sample text</h3>
    <h4>Sample text</h4>
    <p>sample text</p>
    <h1>示例文字</h1>
    <h2>示例文字</h2>
    <h3>示例文字</h3>
    <h4>示例文字</h4>
    <p>示例文字</p>
</body>
</html>

打印预览无边距时,选择A4纸时的尺寸和格子数量刚好一样,用这种背景比较方便做排版和套打,下图是打印后的效果:

和A4纸的尺寸 21.0 x 29.7厘米(8.27 x 11.69英寸) 是一致的。

样式2

效果图:

样式代码:

html 复制代码
<!DOCTYPE html>
<html>
<style>
html
{
    width: 100%;
    height: 100%;
    background-color: lightblue;

    background-size: 40px 40px;
    background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
</style>
<body>
    <h1>Sample text</h1>
    <h2>Sample text</h2>
    <h3>Sample text</h3>
    <h4>Sample text</h4>
    <p>sample text</p>
    <h1>示例文字</h1>
    <h2>示例文字</h2>
    <h3>示例文字</h3>
    <h4>示例文字</h4>
    <p>示例文字</p>
</body>
</html>

样式3

效果图:

样式代码:

html 复制代码
<!DOCTYPE html>
<html>
<style>
html
{
    width: 100%;
    height: 100%;
    background-color: lightblue;

    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}
</style>
<body>
    <h1>Sample text</h1>
    <h2>Sample text</h2>
    <h3>Sample text</h3>
    <h4>Sample text</h4>
    <p>sample text</p>
    <h1>示例文字</h1>
    <h2>示例文字</h2>
    <h3>示例文字</h3>
    <h4>示例文字</h4>
    <p>示例文字</p>
</body>
</html>

样式4

效果图:

样式代码:

html 复制代码
<!DOCTYPE html>
<html>
<style>
html
{
    width: 100%;
    height: 100%;
    background-color: lightblue;

    --grid-size: 30px;
    --grid-strength: 1px;
    --grid-dash: 10px;
    --grid-gap: 5px;
    --grid-color: #ddd;
    --paper-color: #fff;

    background-color: var(--paper-color);
    background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
    background-image:
        linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), 
        linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
        linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
        linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));

}
</style>
<body>
    <h1>Sample text</h1>
    <h2>Sample text</h2>
    <h3>Sample text</h3>
    <h4>Sample text</h4>
    <p>sample text</p>
    <h1>示例文字</h1>
    <h2>示例文字</h2>
    <h3>示例文字</h3>
    <h4>示例文字</h4>
    <p>示例文字</p>
</body>
</html>
相关推荐
用户38022585982411 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210013 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员19 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_21 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子22 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a26 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心26 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq28 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax