防止网格上出现双边框

Question

我正在使用实现填字游戏css grid空白单元格没有颜色。其他单元格有黑色边框。问题在于边界正在相互冲突。我已经打开了这个问题和这个问题。但这里的问题是并非所有单元格都有这种双重边框。这是代码.crossword-board-container {  position: relative;  background: #fff;}.crossword-board {  background: transparent;  display: grid;  grid-template: repeat(5, 4em) / repeat(5, 4em);  list-style-type: none;  padding: 0;  margin: 0 auto;}.crossword-board__item {  border: 1px solid #000;  background: transparent;  text-align: center;  font-size: 20px;  font-weight: bold;  text-transform: uppercase;}<div class="crossword-board-container">  <div class="crossword-board">    <!-- ROW 1 -->    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>  </div></div>

Answer 1

您可以将所有输入顶部和左侧移动 1px，这将使边框相互折叠。

然后向容器添加 1px 的内边距。

这将是结果。

.crossword-board-container {

  position: relative;

  background: #fff;

}

.crossword-board {

  background: transparent;

  display: grid;

  grid-template: repeat(5, 4em) / repeat(5, 4em);

  list-style-type: none;

  padding: 1px;

  margin: 0 auto;

}

.crossword-board input {

  margin: -1px 0 0 -1px;

  border: 1px solid red;

  background: transparent;

  text-align: center;

  font-size: 20px;

  font-weight: bold;

  text-transform: uppercase;

}

<div class="crossword-board-container">

  <div class="crossword-board">

    <!-- ROW 1 -->

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

    <span></span>

    <span></span>

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <span></span>

  </div>

</div>