1. 直线棋盘
直线棋盘可以通过在CSS中设置元素的垂直和水平方向上的边框和内边距来绘制。使用以下代码创建一个简单的直线棋盘：
.board {
width: 300px;
height: 200px;
border-left: 10px solid #000;
border-right: 10px solid #000;
在这个例子中，大家使用了border-left和border-right属性来绘制两条直线。大家还设置了宽度和高度，以便在浏览器中看到棋盘的大小。
2. 交叉线棋盘
交叉线棋盘可以使用CSS的border-radius属性和CSS的transform属性来绘制。以下是一个简单的交叉线棋盘的示例代码：
.board {
width: 300px;
height: 200px;
border-left: 10px solid #000;
border-right: 10px solid #000;
border-bottom: 20px solid #ccc;
border-top: 20px solid #ccc;
.board > div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
transform: rotate(-45deg);
在这个例子中，大家使用了border-radius属性来绘制四个棋盘格子，并使用transform属性来旋转每个格子。大家还将一个背景元素添加到棋盘上，以便在浏览器中看到棋盘的形状。
以上就是使用CSS绘制棋盘的两种方法，你可以根据自己的需要进行选择。