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

一、前言

记录一些有趣的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

思路大致有两点：

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

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

四、实现代码

    
        
        
        
        
    
    
        

        


        
田字网格线（外实内虚）