html - 如何给网格列和行一个边框?
问题描述
基本上是标题。这是代码:
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
#gameboard {
justify-content: center;
align-items: center;
display: grid;
background-color: blue;
border: 1px solid black;
width: 500px;
height: 500px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href="css.css">
</head>
<body>
<div id = "gameboard"></div>
</body>
<script type = "text/javascript" src = "js.js"></script>
</html>
如果您转到片段中的完整页面,您将看到一个 8x8 的网格 - 我如何给每一列和每一行一个黑色边框(有点像棋盘游戏板)?
提前致谢!!
解决方案
推荐阅读
- javascript - 通过 API 请求在 Twitter 上发布图像
- sql - Flutter SQLlite the argument type 'Future
' can't be assigned to the parameter type 'String' error - python - 如何获取在 OpenCV、Python 中使用掩码找到的形状的(x,y)坐标?
- c# - JPEG 压缩产生更大的尺寸
- powershell - 使用 documentNode 参数在 PowerShell 中运行 .net Saxon Transform
- typescript - 如何根据索引位置选择有点动态的 ID?
- python - 来自 Python 中 2 个管道的 Ffmpeg 流
- android - 分布式 Gradle 守护进程
- sql - 在 SQL Server 上的 VarBinary(max) 列上插入数据不会插入全长 VarBinary
- python - 为什么我们应该在 imaplib 搜索方法中写 None