,最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：,
,他用了 60 多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。,其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。,当然，仅仅从用更少的标签完成这个布局的角度而言，我们能够把标签数压缩到多少呢个？（不考虑 <body> 和 <html>）,答案是 1 个。,本文就尝试使用一个标签完成这个效果，当然，这仅仅是探索 CSS 的极限，不代表我推荐在实际业务中这样去写。,我们对整个布局进行一下拆分，大致可以分为三部分：网格 + 虚线交叉十字 + 特殊符号：,
,并且，像虚线交叉十字和特殊的符号都不止一个，这里必然会有一些技巧存在。,OK，首先，我们实现最简单的网格布局：,
,不考虑最外层的一圈边框，我们可以首先利用多重线性渐变实现一个网格布局：,效果如下：,
,在最外层加一层边框有非常多办法，这里我们简单使用 outline 配合 outline-offset 即可：,这样，一个架子就差不多了：,
,当然，棋盘中间的一行，是没有格子的。要将上述渐变代码处理一下，可以分成上下两块，利用 background-size 和 background-position 进行分隔。,当然，我们也可以在最上层直接再叠一层纯白色渐变：,到这里，其实核心还都是渐变，目前共 3 层渐变，得到这样一个效果：,
,OK，我们继续，我们需要基于上述的基础，得到两个交叉虚线十字，像是这样：,
,这里其实真的有难度。想象一下，如果给你一个 DIV，去实现其中一个，可以怎么做呢？,通过 border 中特有的虚线 dashed？这样可能就需要两个元素设置单边的虚线边框，然后旋转相交得到。（可以利用元素的两个伪元素，实现在一个 DOM 中）。,当然，这样的话，我们的标签就不够用了。,所以，这里我们另辟蹊径，继续使用渐变！,首先，打个样，如果是一个 100px x 100px 的 DIV，可以怎么利用渐变去画交叉虚线十字呢？,我们首先利用渐变，实现一条 1px 的斜线，注意这里的渐变是从透明到黑色到透明，实现了一条 45° 的斜线。,
,我们再反 45° 过来，利用多重线性渐变，实现透明到白色的渐变效果：,这样，我们就得到了一条虚线：,
,好吧，这一步有一些同学可能会有一点疑惑，怎么变过来的。,我把上面渐变 1的透明色改成黑色，就很好理解了：,
,想象一下，上图的黑色部分，如果是透明的，就能透出原本的那条斜线没有被白色遮挡住的地方。,好，有了上面的铺垫，我们基于上面的代码，再继续利用渐变，把上下两个交叉虚线十字补齐即可：,嚯，这渐变代码确实复杂了点，但是其实每一块的作用都是很清晰的，这样，我们的棋盘就变成了这样：,
,到这里，我们仅仅使用了元素本身，要知道，我们还有元素的两个伪元素没使用。要实现的只剩下多个的这个符合：,
,因为一共要实现 12 个这样的符号，有的符合还是不完整的，所有这些要在剩余的元素的两个伪元素中完成。可选的方法思来想去，也只有 box-shadow 了。,利用 box-shadow 能够非常好的复制自身。这个技巧其实也反复讲过非常多次了。,我们首先利用元素的一个伪元素，在这个位置，实现一个短横线：,
,代码大致如下：,我们利用 box-shadow 复制自身，可以完成一半横线效果。当然这里由于是个镜面布局，可以利用镜像 -webkit-box-reflect: below 减少一半的代码：,效果如下：,
,最后，利用另外一个伪元素，完成另外一半的竖向横线即可：,这样，我们就在一个标签内，得到这样一个效果：,
,当然，还剩下楚河、汉界 4 个字，这个也简单直接加在 div 中即可，配合一些简单的 CSS 调整，整个效果就在一个标签内完成啦：,
,完整的代码你可以戳这里：CodePen Demo -- CSS Chess board[1],好，实际中我确实不太推荐这么去写，纯粹是为了实现而实现，少了很多代码可读性的考量。因此，本文更多的是给大家带来一些思路，当遇到类似的问题的使用能够有更多的灵感。,好了，本文到此结束，希望本文对你有所帮助 :),[1]CodePen Demo -- CSS Chess board: https://codepen.io/Chokcoco/pen/JjvPjrN。,[2]Github -- iCSS: https://github.com/chokcoco/iCSS。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">