如何解决在伪元素的顶部显示阴影
我的代码如下:
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。