特定的CSS类阻碍了边界动画

Question

所以，我试图在网页中添加边框动画，但没有成功。经过大量测试，我发现一个特定的类wrapper负责删除我的动画并省略它，这解决了问题吗？

但我无法理解背后的原因，因为它看起来毫无戒心。顺便说一句，我是HTMl，CSS的新手。

.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>

Answer 1

问题是因为包装器实际上向右延伸，并且在边界的顶部。如果您将包装器背景设置为"红色"，您将看到发生了什么。

因为边框的z索引设置为-1，所以包装器位于边框的顶部。最简单的修复方法是将包装器的z索引设置为-2，使其位于边界后面。

.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
z-index: -2;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
z-index: -2;
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>