牛逼的AlphaGo，怎样用DIV+CSS画棋盘

这两天柯洁对阵阿尔法狗，不得不说一句人工智能真TM的强大，我觉得把他电源拔了，我肯定能下过他

但是我只会下五子棋，不会下围棋啊

但是我也会画棋盘，你肯定会认为不就是画棋盘吗，给div一个border不就行了

非也非也，我们下过棋的都是知道的，棋子是要下在交叉线上的了

小学的时候用过田子格的那种本子吧

我们今天的目的就是要给实现这个效果，先上效果图帮助大家理解一下

相信大家已经看明白了，这就是在div容器里画两条相互垂直的线，这肯定是border不能办到的

那我们用什么呢

我在思考这个问题的时候也是想了很久，当时都想用canvas了

但是但是，我试了一下伪元素，没想到成功了

下面我们实现单个方格的

<div></div>

       div{
           width: 100px;
           height: 100px;
           position: relative;
           background: #F9CC9D;
       }

        div:before{ 
            content: "";
            position: absolute;
            z-index: 2;
            left: 0;
            right: 0;
            top: 50px;
            height: 1px;
            background: #000; 
        }

        div:after{ 
            content: "";
            position: absolute;
            z-index: 2;
            left: 50px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #000; 
        }

上面的代码就是实现单个的田字格

我们知道伪元素，其实就是相当于在原有的标签上在覆盖上新的标签，我们先对原有的div相对定位后，然后给伪元素

一个绝对定位，然后改变伪元素相对于原有div的相对位置分别给予宽高和背景色

这样就是实现上述棋盘田子格的效果

相信大家看到这里应该是有思路了，画一个完整的棋盘不过就是需要对四个边界的条件进行重新的定位

使用这个方法我们就能给再div里

这就留个大家自己思考了，有问题的话可以留言

下面是我自己正在写的一个五子棋小游戏，感兴趣的朋友可以看一看，里面有完整画棋盘的代码

展示页传送门https://3crazyspecial.github.io/gobang/gobang.html

代码页传送门https://github.com/3crazyspecial/gobang