一、前言
记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找到并使用上~
耐心看完，你也许有所收获～
二、实现效果
大致效果如下，文章结尾有代码，想要的自取，如果想要看demo的可以看这个地址：gitee项目demo地址
https://gitee.com/yin_zhuqun/css-demo
三、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>
