White line between linear-gradient and box-shadow with vertically centered elements

问题: When combining a vertical-gradient and a box-shadow on a vertical centered element it displays a white line between the element and the shadow (at certain sizes). To be a...

问题:

When combining a vertical-gradient and a box-shadow on a vertical centered element it displays a white line between the element and the shadow (at certain sizes).

To be able to show the problem the code snippet forces a size where this problem occurs, in the real case example the heigh scales with the viewport.

This issue happens on Chrome Version 71.0.3578.98 (Safari renders well, didn't test any other browser).

Is there any workarounds that could solve this issue apart of dropping the gradient?

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


回答1:

Applying a background-position-y: -1px; rule to the gradient seems to solve the problem, without having a negative effect on other browsers (tested on 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>


回答2:

You can slightly increase the 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>

Or adjust the background-position to bottom (in case the shadow is always applied to the bottom)

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


回答3:

maybe you could use a

:after

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

  • 发表于 2019-01-17 07:13
  • 阅读 ( 185 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除