单标签实现复杂棋盘布局

.g-grid{width:401px;高度：451px；背景：重复线性渐变（#000，#0001px，透明1px，透明50px），重复线性渐变（90deg，#000，#0001px，透明1px，透明50px）；背景重复：不重复；背景大小：100%100%，100%100%；background-position:00,00;}效果如下：最多有很多种方法可以给外层添加边框。这里我们简单地使用outlinewithoutline-offset:.g-grid{width:401px;高度：451px；背景：重复线性渐变（#000，#0001px，透明1px，透明50px），重复线性渐变（90deg，#000，#0001px，透明1px，透明50px）；背景重复：不重复；背景大小：100%100%，100%100%；背景位置：00、00；轮廓：1px实心#000；outline-offset:5px;}这样一来，一个架子就差不多了：当然，棋盘中间一排就没有格子了。处理上面的渐变代码，可以分为上下两部分，用background-size和background-position分开。当然，我们也可以直接在顶层叠加纯白色渐变：.grid{//...background://在顶层叠加白色渐变linear-gradient(#fff,#fff),//下面两个重复线性渐变实现gridrepeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px);背景重复：不重复；背景大小：calc(100%-2px)49px,100%100%,100%100%;background-position:1px201px,00,00;}这里，其实核心都是渐变。目前，有3层渐变。得到这样的效果：使用渐变实现交叉点交叉OK，我们继续。我们需要在上面的基础上得到两个打叉的十字，像这样：其实有难度。想象一下，如果给你一个DIV来实现其中的一个，你会怎么做呢？由边界中的特征虚线划线？这个可能需要两个元素设置一个单边的虚线边框，然后旋转相交得到。（可以通过使用元素的两个伪元素在DOM中实现）。当然，在这种情况下，我们的标签是不够的。所以，这里我们换一种方式，继续使用渐变！首先做一个样例，如果是100pxx100px的DIV，怎么用渐变画出十字点状十字呢？div{位置：相对；保证金：自动；宽度：100px；高度：100px；边框：1px实心#000；背景：线性渐变（45deg，透明0，透明计算（50%-0.5px），#000计算（50%-0.5px），#000计算（50%+0.5px），透明计算（50%+0.5px),transparent0);}我们先用渐变来实现一条1px的斜线，注意这里的渐变是从透明到黑色再到透明，实现了45°的斜线。让我们反转45°，使用多个线性渐变来实现从透明到白色的渐变效果：div{position:relative;保证金：自动；宽度：100px；高度：100px；边框：1px实心#000；背景：//渐变1重复线性渐变（-45deg，透明0，透明5px，#fff5px，#fff10px），//渐变2线性渐变（45deg，透明0，透明calc（50%-0.5）px),#000calc(50%-0.5px),#000calc(50%+0.5px),transparentcalc(50%+0.5px),transparent0);}所以我们有一条虚线：好的，这个stephas怎么来的可能有些同学有点疑惑。我把上面渐变1的透明色改成了黑色，这个很容易理解：想象一下，上图的黑色部分，如果是透明的，可以显露出原来没有被白色覆盖的斜线。这里，需要提一下，在gradient中，越先写gradient，level越高。好了，有了上面的铺垫，我们在上面代码的基础上继续使用渐变，上下交叉虚线填充：.g-grid{width:401px;高度：451px；轮廓：1px实心#000；轮廓偏移：5px；background://最上面的白色块挡住了中间的网格linear-gradient(#fff,#fff),//实现网格布局repeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px),//板上方的虚线1repeating-linear-gradient(-45deg,transparent0,transparent5px,#fff5px,#fff10px),线性渐变(45deg,透明,透明计算(50%-0.5px),#000计算(50%-0.5px),#000计算(50%+0.5px),透明计算(50%+0.5px)),transparent0),//板上方的虚线2repeating-linear-gradient(45deg,transparent0,transparent5px,#fff5px,#fff10px),linear-gradient(-45deg,transparent,transparentcalc(50%-0.5px),#000calc(50%-0.5px),#000calc(50%+0.5px),transparentcalc(50%+0.5px),transparent0),//板下方的虚线1repeating-linear-gradient(-45deg,transparent0,transparent5px,#fff5px,#fff10px),linear-gradient(45deg,transparent,transparentcalc(50%-0.5px),#000calc(50%-0.5px),#000calc(50%+0.5px),transparentcalc(50%+0.5px),transparent0),//板下方的虚线2repeating-linear-gradient(45deg,transparent0,transparent5px,#fff5px,#fff10px),linear-gradient(-45deg,transparent,transparentcalc(50%-0.5px),#000calc(50%-0.5px),#000calc(50%+0.5px),transparentcalc(50%+0.5px),透明0);背景重复：不重复；background-size:calc(100%-2px)49px,100%100%,100%100%,//交叉虚线1100px100px,100px100px,100px100px,100px100px,//交叉虚线2100px100px,100px100px,100px100px,100px100px;background-position:1px201px,00,00,//交叉虚线1151px0,151px0,151px0,151px0,//交叉虚线2151px350px,151px350px,151px351px,350px;oh15，这段渐变的代码确实有点复杂，但其实每个方块的作用都很明确，所以，我们的棋盘就变成了这样：利用伪元素和box-shadow来实现剩下的合规。在这里，我们只使用元素本身。要知道，我们还有两个元素的伪元素没有用到。这个构造：因为一共有12个这样的符号要实现，所以有些构造还不完整，这些都必须在剩余元素的两个伪元素中完成。想了想optional的方法，就只有box-shadow了。使用box-shadow可以很好的复制自己。这个技巧实际上已经重复了很多次。我们先用元素的伪元素在这个位置实现一条短横线：代码大致如下：.g-grid{//...&::before{content:"";位置：绝对；顶部：95px；左：35px；宽度：10px；高度：1px；背景：#000；}}我们使用box-shadow复制自身，可以完成一半的横线效果。当然，由于这是一个镜像布局，你可以使用下面的mirror-webkit-box-reflect:将代码减少一半：.g-grid{//...&::before{content:"";位置：绝对；顶部：95px；左：35px；宽度：10px；高度：1px；背景：#000；，50px50px，50px60px，70px50px，70px60px，150px50px，150px60px，170px50px，170px60px，250px，250px50px，250px60px，270px，270px，270px，270px，270px60px60px，30px，350px，350px，350px，350px，350px，350px，350px，350px，350px，350;-webkit-box-reflect:below259px;}}效果如下：最后再用一个伪元素补全另一半竖横线：.g-grid{//...&::before{//...}&::：after{//...box-shadow:10px0,020px,10px20px,300px0px,300px20px,310px0,310px20px,-40px50px,-40px70px,50px50px,50px,60px750px,60px70px,150px50px,150px70px,160px50px,160px70px,250px50px,250px70px,260px50px,260px70px,350px70px;就在一个标签里，得到这样的效果：当然，还有楚河和汉杰这4个字，可以简单的直接加到div中，简单的CSS调整一下，整个效果在一个标签里就搞定了：完整代码可以点这里：CodePenDemo--CSSChessboard嗯，实际中，我真的不建议这样写，纯粹是为了实现，没有太多代码可读性的考虑。因此，这篇文章更多的是想给大家带来一些思路，在遇到类似问题的时候能有更多的启发。最后，本文到此结束。希望这篇文章对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。