《CSS3》田字网格背景（外实线内虚线）的实现

一、前言

记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找到并使用上~

耐心看完，你也许有所收获～

二、实现效果

大致效果如下，文章结尾有代码，想要的自取，如果想要看demo的可以看这个地址：gitee项目demo地址https://gitee.com/yin_zhuqun/css-demo

《CSS3》田字网格背景（外实线内虚线）的实现-LMLPHP

三、CSS要点

这个效果其实没有什么复杂的CSS写法，核心的要点就是对 background属性的利用；MDN关于background属性的说明https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

思路大致有两点：

实线和虚线分开根据不同的尺寸画格子，然后利用background-repeat的铺满效果将整个页面平铺完整；
实线就是单独的线，虚线的实现则利用transparent这个透明属性进行隔断；

别的好像也没什么特别的点了，剩下的无非就是根据实际场景凑样式换颜色了；

四、实现代码

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS网格线,田字格</title>
        <style>
            body,
            html {
                position: relative;

                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

                overflow: hidden;
            }
            .text-style {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                padding: 12px 20px;

                background-color: #ffffff;
                font-size: 22px;
                font-weight: bold;
                letter-spacing: 2px;
            }

            /* 具体CSS样式部分 */
            :root {
                --gridColor: #888888;
                /* --gridColor: #000000; */
                --gridDottedLine: 20px;
                --gridSolidLine: 60px;
            }
            .dotted-line {
                position: fixed;

                width: 100%;
                height: 100%;
                transform: scale(1.1);

                overflow: hidden;
                z-index: -4;
            }
            .dotted-line::before,
            .dotted-line::after {
                position: absolute;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;

                opacity: 0.8;
                content: "";
            }
            .dotted-line::before {
                background: linear-gradient(
                        to right,
                        white 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        to bottom,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: 4px var(--gridDottedLine);
            }
            .dotted-line::after {
                background: linear-gradient(
                        to bottom,
                        white 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        to right,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: var(--gridDottedLine) 4px;
            }

            .solid-line {
                position: fixed;

                width: 100%;
                height: 100%;
                transform: scale(1.1);

                overflow: hidden;
                z-index: -2;
                background: linear-gradient(
                        to right,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    ),
                    linear-gradient(
                        to bottom,
                        var(--gridColor) 0.5px,
                        transparent 0.5px
                    );
                background-size: var(--gridSolidLine) var(--gridSolidLine);
            }
        </style>
    </head>
    <body>
        <div class="dotted-line"></div>
        <div class="solid-line"></div>

        <div class="text-style">田字网格线（外实内虚）</div>
    </body>
</html>

Oliver尹

《CSS3》田字网格背景（外实线内虚线）的实现

一、前言

二、实现效果

三、CSS要点

四、实现代码