防止网格上的双边框[重复]答案

【问题标题】：prevent double border on grid [duplicate]防止网格上的双边框[重复]
【发布时间】：2020-07-24 05:40:03
【问题描述】：

我正在使用 css grid 实现填字游戏

空白单元格没有颜色。其他单元格有黑色边框。

问题在于边界相互协作。

我已经打开了this question 和this question。但这里的问题是并非所有单元格都有这个双边框。

这里是代码

.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>

【问题讨论】：

这是一个修复设计还是未来几天可能会发生变化？
它是固定的，但它比这个演示更大。所以我想要动态解决方案，而不是为每个单元格添加自定义边框
您链接的问题中的解决方案适用于此处，示例：stackoverflow.com/a/47883004/8620333 / stackoverflow.com/a/54327607/8620333
使用 box-shadow 和 grid-gap 在stackoverflow.com/questions/43686698/…查看第一个答案，我认为这是最好的解决方案

标签： html css

【解决方案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>

【讨论】：

看起来你这里不需要 1px 的填充。它仍然有效。
会溢出容器，如果可以接受，可以省略。 :]