此问题已在此处有答案：
Why can't an element with a z-index value cover its child?（4个答案）
2天前关闭。
我试图重新创建一个线性渐变边界，它有一个阴影的颜色，类似于this example。我有这样的CSS代码：
.container {
background: $jet;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
font-family: "Inconsolata", monospace;
}
.rightSide {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 2 1;
}
.projects {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
box-sizing: border-box;
width: 18rem;
position: relative;
padding: 1rem 2rem;
margin: auto;
background: linear-gradient(0deg, #000, #262626);
}
.projects h2 {
font-size: 1.5em;
text-align: center;
margin-bottom: 0.75em;
padding-bottom: 0.25em;
border-bottom: 1px solid white;
}
.projects ul {
padding-inline: 0;
margin-block: 0;
}
.projects ul li {
list-style: "▶" outside none;
padding-left: 0.5em;
}
.projects ul li > a {
color: $blue;
text-decoration: none;
}
.projects ul li > a:hover {
text-decoration: underline;
}
.projects ul li:nth-of-type(n+11) {
display: none;
}
.projects ul li:not(:last-child) {
margin-bottom: 0.75em;
}
.projects::before,
.projects:after {
content: "";
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(
45deg,
#fb0094,
#0000ff,
#ff0000,
#fb0094,
#0000ff,
#ff0000
);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 60s linear infinite;
}
.projects:after {
filter: blur(20px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 300% 0;
}
100% {
background-position: 0 0;
}
}<div class="container">
<h1 class="name">Temp</h1>
<div class="rightSide">
<div class="projects">
<h2>Projects</h2>
<ul>
<li><a aria-current="page" class="" href="/">Project 1</a></li>
<li><a aria-current="page" class="" href="/">Project 2</a></li>
<li><a aria-current="page" class="" href="/">Project 3</a></li>
</ul>
</div>
</div>
</div>https://jsfiddle.net/u2xvekdb/
但是，这只显示项目div的背景，而不是动画阴影和边框。如果我将z-index: 0;添加到div中，它确实显示了阴影，但是伪元素的整个背景都显示出来了，主背景丢失了。
预期值：
无z索引：0
使用z索引：0
如何更改它以获得预期的结果？
1条答案
按热度按时间mspsb9vt1#
它的工作现在有一个外观背景也出现了沿着动画。