我正在建设奥赛罗游戏板在HTML和CSS.我使用<table>元素的董事会，有8行，包含8个单元格.非常标准的元素 struct .
为了在表格单元格元素中绘制黑白的奥赛罗游戏棋子(以及最近移动指示器的红点)，我希望能够向<td>个元素添加特定的类，并使用:before伪元素应用特定的背景样式.大概是这样的:
<td class="circle white"></td>块用于显示白色棋子的位置
和
<td class="circle black"></td>表示应在何处显示黑色块.
和 something like
<td class="circle black most-recent-move"></td>分，其中一块黑色的是最近采取的行动.
So far on that, I'm good using the following HTML 和 CSS:
#board-table tbody tr td.circle:before {
content: "";
display:inline-block;
width:60px;
height:60px;
line-height: 60px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
position:relative;
left:3px;
}
#board-table tbody tr td{
background-color:#2EAE52;
padding:4px;
min-height:70px;
min-width:70px;
height:70px;
width:70px;
border:solid 2px #000000;
}
#board-table tbody tr td.white:before {
border:solid 2px white;
background: linear-gradient(225deg, #959696 10%, #FFFFFF);
background-repeat: no-repeat;
}
#board-table tbody tr td.black:before {
border:solid 2px black;
background: linear-gradient(225deg, #6c6c6c 10%, #000000);
background-repeat: no-repeat;
}
#board-table tbody tr td.white.most-recent-move:before {
border:solid 2px white;
background-repeat: no-repeat;
background: radial-gradient(circle, red 15%,rgba(255,0,0,0) 10%) 100%,
linear-gradient(225deg, #959696 10%, #FFFFFF);
}
#board-table tbody tr td.black.most-recent-move:before {
content: "";
border:solid 2px black;
background-repeat: no-repeat;
background: radial-gradient(circle, red 15%,rgba(255,0,0,0) 10%) 100%,
linear-gradient(225deg, #6c6c6c 10%, #000000);
}<div>
<table id="board-table" cellpadding="0" cellspacing="0">
<thead>
</thead>
<tbody>
<tr>
<td id="a1" class="circle"></td>
<td id="b1" class="circle"></td>
<td id="c1" class="circle"></td>
<td id="d1" class="circle"></td>
<td id="e1" class="circle"></td>
<td id="f1" class="circle"></td>
<td id="g1" class="circle"></td>
<td id="h1" class="circle"></td>
</tr>
<tr>
<td id="a2" class="circle"></td>
<td id="b2" class="circle black most-recent-move"></td>
<td id="c2" class="circle"></td>
<td id="d2" class="circle"></td>
<td id="e2" class="circle"></td>
<td id="f2" class="circle"></td>
<td id="g2" class="circle"></td>
<td id="h2" class="circle"></td>
</tr>
<tr>
<td id="a3" class="circle"></td>
<td id="b3" class="circle"></td>
<td id="c3" class="circle"></td>
<td id="d3" class="circle"></td>
<td id="e3" class="circle"></td>
<td id="f3" class="circle"></td>
<td id="g3" class="circle"></td>
<td id="h3" class="circle"></td>
</tr>
<tr>
<td id="a4" class="circle"></td>
<td id="b4" class="circle"></td>
<td id="c4" class="circle"></td>
<td id="d4" class="circle white"></td>
<td id="e4" class="circle black"></td>
<td id="f4" class="circle"></td>
<td id="g4" class="circle"></td>
<td id="h4" class="circle"></td>
</tr>
<tr>
<td id="a5" class="circle"></td>
<td id="b5" class="circle"></td>
<td id="c5" class="circle"></td>
<td id="d5" class="circle black"></td>
<td id="e5" class="circle white"></td>
<td id="f5" class="circle"></td>
<td id="g5" class="circle"></td>
<td id="h5" class="circle"></td>
</tr>
<tr>
<td id="a6" class="circle"></td>
<td id="b6" class="circle"></td>
<td id="c6" class="circle"></td>
<td id="d6" class="circle"></td>
<td id="e6" class="circle"></td>
<td id="f6" class="circle"></td>
<td id="g6" class="circle"></td>
<td id="h6" class="circle"></td>
</tr>
<tr>
<td id="a7" class="circle"></td>
<td id="b7" class="circle"></td>
<td id="c7" class="circle"></td>
<td id="d7" class="circle"></td>
<td id="e7" class="circle"></td>
<td id="f7" class="circle"></td>
<td id="g7" class="circle"></td>
<td id="h7" class="circle"></td>
</tr>
<tr>
<td id="a8" class="circle"></td>
<td id="b8" class="circle"></td>
<td id="c8" class="circle"></td>
<td id="d8" class="circle"></td>
<td id="e8" class="circle"></td>
<td id="f8" class="circle"></td>
<td id="g8" class="circle"></td>
<td id="h8" class="circle"></td>
</tr>
</tbody>
</table>
</div>The problem I'm having is with adding "star points" to the board. There are 4 star points that I want to put on the board - little black dots at the corners of the inner 16 (4 x 4) squares. These star points need to be shown at all times, whether there are game pieces around them or not. 
I've tried adding a third radial gradient to some of the background gradients I already have but then that third gradient seems to be taking over the entire table cell 和 nothing else gets displayed. I can't seem to figure out a way to position the little black circles where I want them without messing up what I already have.
我也有点不确定我是应该继续使用<td>的:before伪元素，还是应该把所有的点都加到<table>的:before上，或者其他什么.我通常不会做很多的css工作，所以这对我来说是一个很大的挑战.