如何在CSS伪元素背景中定位多组径向渐变（奥赛罗棋盘场景）

核心问题分析 #

你之前尝试在<td>的:before里添加第三个径向渐变导致样式覆盖，本质原因是：单个伪元素的background叠加多渐变会让星点全局显示（所有格子都有），且原有:before已经承担了棋子和移动标记的职责，继续叠加必然造成样式冲突。

推荐解决方案 #

方案1：给目标格子加类，用:after伪元素实现星点

这种方式适配格子大小变化，星点会自动跟随格子中心，维护成本低。

1. HTML修改：给4个星点位置的<td>添加专属类（奥赛罗星点对应第3、6行/列，即索引2、5的<tr>和<td>）：

<table class="othello-board">
  <!-- 第1-2行省略 -->
  <tr>
    <td></td><td></td><td class="board-star"></td><td></td><td></td><td></td><td class="board-star"></td><td></td>
  </tr>
  <!-- 第4-5行省略 -->
  <tr>
    <td></td><td></td><td class="board-star"></td><td></td><td></td><td></td><td class="board-star"></td><td></td>
  </tr>
  <!-- 第7-8行省略 -->
</table>

2. CSS添加星点样式：

/* 星点样式，用:after避免和原有:before冲突 */
td.board-star:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  z-index: 0; /* 确保星点在棋子下方，符合真实棋盘逻辑 */
}

方案2：用<table>的:after伪元素批量绘制星点

这种方式无需修改HTML，适合棋盘尺寸固定的场景，通过背景定位一次性画出4个星点：

table.othello-board {
  position: relative; /* 为伪元素提供定位容器 */
  /* 原有棋盘样式：border-collapse、background等 */
}

/* 全局星点绘制 */
table.othello-board:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不遮挡格子的点击交互 */
  /* 4个星点的径向渐变 */
  background-image: 
    radial-gradient(circle, #000 8px, transparent 8px),
    radial-gradient(circle, #000 8px, transparent 8px),
    radial-gradient(circle, #000 8px, transparent 8px),
    radial-gradient(circle, #000 8px, transparent 8px);
  /* 对应4个星点的位置：(第3行第3列)、(第3行第6列)、(第6行第3列)、(第6行第6列) */
  background-position: 
    calc(2 * 50px + 25px) calc(2 * 50px + 25px),
    calc(2 * 50px + 25px) calc(5 * 50px + 25px),
    calc(5 * 50px + 25px) calc(2 * 50px + 25px),
    calc(5 * 50px + 25px) calc(5 * 50px + 25px);
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

注：代码中50px是单个格子的宽高，若你的格子尺寸不同，替换成对应数值即可。

方案选择建议 #

• 若棋盘格子尺寸可能动态调整（比如响应式），选方案1，星点会自动适配格子位置；
• 若棋盘尺寸固定，选方案2，无需修改HTML，代码更简洁。

内容的提问来源于stack exchange，提问作者jamauss