GitLab

背景

html代码

<div className={styles.content}>
   ...
</div>

css代码

.content {
  background: url('~@/assets/login-bj.png') 100%/100% no-repeat;
  box-shadow: 0 6px 24px 0px rgba(0, 0, 0, 0.04);
  ...
}

此时奇怪的事情发生了，在图片和阴影的交界处，出现了一条白线，如下图所示

原因分析

经过反复检查，图片内部无白线，元素无border等参数。最终把问题定位在可能是图片和阴影组合使用，存在bug，经过google，发现这是一个超过4年的历史bug。目前未被chrome和safari解决。

解决方案

通过套一层纯色背景，把白色覆盖掉
html代码

<div className={styles.fixShadowWhiteLine}>
   <div className={styles.content}>
      ...
   </div>
</div>

css代码

.fixShadowWhiteLine {
   background-color: #EDEEF8;
   .content {
     background: url('~@/assets/login-bj.png') 100%/100% no-repeat;
     ...
   }
}