在伪元素的顶部显示阴影

问题描述

我正在尝试实现以下效果：

我的代码如下：

.Box {
  background: #fff;
  width: 600px;
  height: 100px;
  position: relative;
  z-index: 999;
  Box-shadow: 0px 2px 4px 0px rgba(0,0.75);
}

.Box::after {
  background: linear-gradient(to right,#00a1e4 25%,#ff9a00 25%,#ff9a00 50%,#00a525 50%,#00a525 75%,#8c449d 75%);
  position: absolute;
  content: "";
  height: 10px;
  right: 0;
  left: 0;
  bottom: -10px;
  z-index: 1;
}

<div class="Box">
</div>

在上面的示例中，伪元素出现在框阴影的顶部， 如何使阴影显示在伪元素的顶部？

Here is the example on codepen

解决方法

您可以在伪内部重新绘制阴影：

.box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0,0.75);
}

.box::after {
    background: linear-gradient(to right,#00a1e4 25%,#ff9a00 25%,#ff9a00 50%,#00a525 50%,#00a525 75%,#8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
  box-shadow: inset 0 5px  4px -3px rgba(0,0.75);
}

<div class="box">
  
</div>

您也可以使用mix-blend-mode：

.box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0,#8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
 mix-blend-mode:multiply;
}

<div class="box">
  
</div>