html - 具有垂直居中元素的线性渐变和框阴影之间的白线

Question

当在垂直居中的元素上组合 vertical-gradient 和 box-shadow 时，它会在元素和阴影之间显示一条白线(在某些尺寸下)。

为了能够显示问题，代码片段会在出现此问题的地方强制设置尺寸，在实际案例中，高度会随视口(viewport)缩放。

此问题发生在 Chrome 版本 71.0.3578.98 上(Safari 呈现良好，未测试任何其他浏览器)。

除了降低梯度之外，是否有任何解决方法可以解决此问题？

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

Answer 1

将 background-position-y: -1px; 规则应用于渐变似乎可以解决问题，而不会对其他浏览器产生负面影响(在 Firefox 上测试)。

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
  background-position-y: -1px;
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>