今天小编给大家分享一下怎么使用单个标签和CSS实现复杂的棋盘布局的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先，我们实现最简单的网格布局：不考虑最外层的一圈边框，我们可以首先利用多重线性渐变实现一个网格布局：
.g-grid{
width:401px;
height:451px;
background:
repeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),
repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px);
background-repeat:no-repeat;
background-size:100%100%,100%100%;
background-position:00,00;
}
效果如下：在最外层加一层边框有非常多办法，这里我们简单使用 outline 配合 outline-offset 即可：
.g-grid{
width:401px;
height:451px;
background:
repeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),
repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px);
background-repeat:no-repeat;
background-size:100%100%,100%100%;
background-position:00,00;
outline:1pxsolid#000;
outline-offset:5px;
}
这样，一个架子就差不多了：当然，棋盘中间的一行，是没有格子的。要将上述渐变代码处理一下，可以分成上下两块，利用 background-size 和 background-position 进行分隔。当然，我们也可以在最上层直接再叠一层纯白色渐变：
.grid{
//...
background:
//最上层叠加一层白色渐变
linear-gradient(#fff,#fff),
//下面两个重复线性渐变实现网格
repeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),
repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px);
background-repeat:no-repeat;
background-size:calc(100%-2px)49px,100%100%,100%100%;
background-position:1px201px,00,00;
}
到这里，其实核心还都是渐变，目前共 3 层渐变，得到这样一个效果：OK，我们继续，我们需要基于上述的基础，得到两个交叉虚线十字，像是这样：这里其实真的有难度。想象一下，如果给你一个 DIV，去实现其中一个，可以怎么做呢？通过 border 中特有的虚线 dashed？这样可能就需要两个元素设置单边的虚线边框，然后旋转相交得到。（可以利用元素的两个伪元素，实现在一个 DOM 中）。当然，这样的话，我们的标签就不够用了。所以，这里我们另辟蹊径，继续使用渐变！首先，打个样，如果是一个 100px x 100px 的 div，可以怎么利用渐变去画交叉虚线十字呢？
div{
position:relative;
margin:auto;
width:100px;
height:100px;
border:1pxsolid#000;
background:linear-gradient(
45deg,
transparent0,transparentcalc(50%-0.5px),
#000calc(50%-0.5px),#000calc(50%+0.5px),
transparentcalc(50%+0.5px),transparent0);
}
我们首先利用渐变，实现一条 1px 的斜线，注意这里的渐变是从透明到黑色到透明，实现了一条 45 的斜线。我们再反 45 过来，利用多重线性渐变，实现透明到白色的渐变效果：
div{
position:relative;
margin:auto;
width:100px;
height:100px;
border:1pxsolid#000;
background:
//渐变1
repeating-linear-gradient(-45deg,transparent0,transparent5px,#fff5px,#fff10px),
//渐变2
linear-gradient(45deg,
transparent0,transparentcalc(50%-0.5px),
#000calc(50%-0.5px),#000calc(50%+0.5px),
transparentcalc(50%+0.5px),transparent0);
}
这样，我们就得到了一条虚线：好吧，这一步有一些同学可能会有一点疑惑，怎么变过来的。我把上面渐变 1的透明色改成黑色，就很好理解了：想象一下，上图的黑色部分，如果是透明的，就能透出原本的那条斜线没有被白色遮挡住的地方。这里，需要提一下，在渐变中，越是先书写的渐变，层级越高。好，有了上面的铺垫，我们基于上面的代码，再继续利用渐变，把上下两个交叉虚线十字补齐即可：
.g-grid{
width:401px;
height:451px;
outline:1pxsolid#000;
outline-offset:5px;
background:
//最上层的白色块，挡住中间的网格
linear-gradient(#fff,#fff),
//实现网格布局
repeating-linear-gradient(#000,#0001px,transparent1px,transparent50px),
repeating-linear-gradient(90deg,#000,#0001px,transparent1px,transparent50px),
//棋盘上方的虚线1
repeating-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),
//棋盘上方的虚线2
repeating-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),
//棋盘下方的虚线1
repeating-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),
//棋盘下方的虚线2
repeating-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);
background-repeat:no-repeat;
background-size:
calc(100%-2px)49px,100%100%,100%100%,
//交叉虚线1
100px100px,100px100px,100px100px,100px100px,
//交叉虚线2
100px100px,100px100px,100px100px,100px100px;
background-position:
1px201px,00,00,
//交叉虚线1
151px0,151px0,151px0,151px0,
//交叉虚线2
151px350px,151px350px,151px350px,151px350px;
}
嚯，这渐变代码确实复杂了点，但是其实每一块的作用都是很清晰的，这样，我们的棋盘就变成了这样：到这里，我们仅仅使用了元素本身，要知道，我们还有元素的两个伪元素没使用。要实现的只剩下多个的这个符合：因为一共要实现 12 个这样的符号，有的符合还是不完整的，所有这些要在剩余的元素的两个伪元素中完成。可选的方法思来想去，也只有 box-shadow 了。利用 box-shadow 能够非常好的复制自身。这个技巧其实也反复讲过非常多次了。我们首先利用元素的一个伪元素，在这个位置，实现一个短横线：代码大致如下：
.g-grid{
//...
&::before{
content:"";
position:absolute;
top:95px;
left:35px;
width:10px;
height:1px;
background:#000;
}
}
我们利用 box-shadow 复制自身，可以完成一半横线效果。当然这里由于是个镜面布局，可以利用镜像 -webkit-box-reflect: below 减少一半的代码：
.g-grid{
//...
&::before{
content:"";
position:absolute;
top:95px;
left:35px;
width:10px;
height:1px;
background:#000;
box-shadow:
20px0,010px,20px10px,
300px0,320px0,300px10px,320px10px,
-30px50px,-30px60px,
50px50px,50px60px,70px50px,70px60px,
150px50px,150px60px,170px50px,170px60px,
250px50px,250px60px,270px50px,270px60px,
350px50px,350px60px;
-webkit-box-reflect:below259px;
}
}
效果如下：最后，利用另外一个伪元素，完成另外一半的竖向横线即可：
.g-grid{
//...
&::before{
//...
}
&::after{
//...
box-shadow:
10px0,020px,10px20px,
300px0px,300px20px,310px0,310px20px,
-40px50px,-40px70px,
50px50px,50px70px,60px50px,60px70px,
150px50px,150px70px,160px50px,160px70px,
250px50px,250px70px,260px50px,260px70px,
3免费云主机域名50px50px,350px70px;
-webkit-box-reflect:below260px;
}
}
这样，我们就在一个标签内，得到这样一个效果：当然，还剩下楚河、汉界 4 个字，这个也简单直接加在 div 中即可，配合一些简单的 CSS 调整，整个效果就在一个标签内完成啦：以上就是“怎么使用单个标签和CSS实现复杂的棋盘布局”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。
这篇文章主要介绍“使用C语言实现五子棋游戏的代码怎么写”，在日常操作中，相信很多人在使用C语言实现五子棋游戏的代码怎么写问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”使用C语言实现五子棋游戏的代码怎么写”的疑惑有所帮助！接下来，…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
