Question

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

为了能够显示该问题，代码片段会在发生此问题的地方设置一个大小，在实际示例中，高度随视口缩放。

此问题发生在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>

Answer 2

您可以稍微增加background-size：

.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-size:100% calc(100% + 1px);
}

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

或将背景位置调整到底部（以防阴影始终施加在底部）

.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%) bottom;
}

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

Answer 3

也许您可以使用

：之后

.content{
    height: 96px;
    display: inline-flex;
    position: relative;
}
.box {
    width: 50px;
    margin: 0 20px;
}
.box-shadow1{
     background: radial-gradient(circle at top, #00448b 60%, #6dfff1 150%);}
 .box-shadow2{
    background: radial-gradient(circle at top, #ffec04 , #f48f11 );}
 .box-shadow1:after {
       width: 50px;
    height: 100%;
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1;
    box-shadow: 0px 0px 47px 0px #29adec;
}
 .box-shadow2:after {
    width: 50px;
    height: 20px;
    content: '';
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 20px 0px #a67300;
}

<div class="content">
  <div class="box box-shadow1"></div>
  <div class="box box-shadow2"></div>
</div>

线性渐变和具有垂直居中元素的矩形阴影之间的白线

3 个答案: