如何创建具有连接线的格子/网格，还有边框/阴影？答案

【问题标题】：How to create a lattice/grid with connected lines, but also border/shadow?如何创建具有连接线的格子/网格，还有边框/阴影？
【发布时间】：2018-04-19 09:43:18
【问题描述】：

我需要为照片编辑器 UI 创建一个格子/网格叠加层。网格本身的线条应该是白色的，并且“相互连接”——例如，它们不会明显地相互重叠。但是，整个网格需要有 1px 的边框或阴影。

这是一个例子：

有什么想法可以实现吗？理想情况下，我想要一个可以绝对定位在图像本身之上的解决方案。

虽然可能没什么区别，但这是针对 React Native 项目的。

【问题讨论】：

可能想看看display: grid 或table 并从那里开始
@A.Lau 在这种情况下，RN 确实会影响这一点。我相信只有 display:flex 可用。

标签： javascript html css reactjs react-native

【解决方案1】：

希望这对您有所帮助。我已经使用grid 布局设置了一个基础。请检查是否正常。

.grid-container {
  display: flex;
  padding: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100px;
}
.grid-item {
  font-size: 30px;
  text-align: center;
  box-shadow: inset 10px -10px 15px 0 rgba(0,0,0,.2);
  flex: 0 0 30%;
  margin-bottom: 3%;
  margin-right: 3%;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

【讨论】：

抱歉，display: grid 不适用于 React Native。
好的，我认为 flex 会解决的。我会更新我的答案。

【解决方案2】：

您可能应该使用类似react-native-shadow 的包。

在android上只能通过elevation样式属性实现阴影，没有机会控制阴影偏移和半径。

【讨论】：

这甚至还没有接近答案，应该作为评论留下。我看不出那个包对我有什么帮助。是的，我知道 Android 上的 elevation。