如何用CSS制作双词交叉填字游戏的边框？

方案1：CSS Grid + 间隙背景（最省心） #

这个方法完全避开边框叠加的问题，核心思路是用grid-gap实现单元格间的1px分隔，外层容器单独设置粗边框：

1. 外层容器样式：

.crossword-grid {
  /* 外围粗边框，5-10px可自行调整 */
  border: 8px solid #000;
  display: grid;
  /* 6列，每列宽度根据需求调整 */
  grid-template-columns: repeat(6, 50px);
  /* 5行，每行高度同理 */
  grid-template-rows: repeat(5, 50px);
  /* 单元格之间的1px间隙 */
  gap: 1px;
  /* 间隙颜色就是分隔线颜色 */
  background-color: #000;
}

2. 单元格基础样式：

.cell {
  /* 单元格背景白色，覆盖外层背景，间隙处露出黑色分隔线 */
  background-color: #fff;
  /* 可选：让单元格内内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

3. 隐藏单元格样式：

.cell.hidden {
  /* 隐藏单元格背景设成和外层一致，和分隔线融合，看起来就像不存在 */
  background-color: #000;
  /* 可选：禁止点击隐藏单元格 */
  pointer-events: none;
}

方案2：边框合并（适合表格布局） #

如果你是用<table>生成网格，用border-collapse配合外层容器粗边框：

1. 外层容器（包裹table）：

.crossword-wrapper {
  border: 8px solid #000;
  display: inline-block;
}

2. 表格和单元格样式：

.crossword-table {
  border-collapse: collapse;
}

.crossword-table td {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  text-align: center;
}

.crossword-table td.hidden {
  background-color: #000;
  border-color: #000;
}

方案优势说明 #

• 方案1里单元格本身无边框，分隔线靠网格间隙的背景实现，彻底避免相邻边框叠加成2px的问题；外层直接设置粗边框，一步到位。
• 方案2用border-collapse: collapse让表格单元格边框合并，相邻单元格边框仅显示1px，外层容器的粗边框和表格边框无冲突。

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