设置容器不透明背景后渐变边框消失的原因求助

我实现了一个带有渐变边框的盒子，但给container设置实色背景后，渐变边框就消失了。奇怪的是，只要容器背景透明度低于100%，甚至设为transparent或unset时，渐变边框就能正常显示。这是浏览器bug吗？求解释原因。

复现代码 #

CSS #

.container {
     width: 100%;
     height: 100%;
}
 .container-1 {
     /* background: transaprent; */
}
 .container-2 {
     background: #161616;
}
 .gradient-box {
     display: flex;
     align-items: center;
     width: 90%;
     margin: auto;
     max-width: 22em;
     position: relative;
     padding: 2rem;
     box-sizing: border-box;
     color: #fff;
     background: #000;
     background-clip: padding-box;
    /* !importanté */
     border: solid 5px transparent;
    /* !importanté */
     border-radius: 1em;
}
 .gradient-box:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     margin: -5px;
    /* !importanté */
     border-radius: inherit;
    /* !importanté */
     background: linear-gradient(to right, red, orange);
}
 html {
     height: 100%;
     background: #171717;
     display: flex;
}
 body {
     margin: auto;
}

HTML #

<div class="container container-1">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>

<div class="container container-2">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>

原因解释 #

这不是浏览器bug，完全是CSS层叠上下文的绘制顺序导致的：

你的渐变边框是靠.gradient-box:before伪元素实现的，它设置了z-index: -1和绝对定位。但.gradient-box只是相对定位，没设置z-index（默认值auto），所以它不会创建独立的层叠上下文——这就导致伪元素的层叠层级是相对于最外层的body来计算的。

按照CSS的绘制顺序规则：

• 层叠上下文中，z-index为负的元素会先被绘制
• 普通的非定位元素（比如这里的.container）会在z-index负元素之后绘制

所以当.container设置了非透明实色背景时，它会直接盖在伪元素上面，把渐变边框完全挡住；而当.container背景透明时，伪元素就能透过它显示出来。

解决方案 #

只要让.gradient-box创建自己的层叠上下文，伪元素的z-index就会相对于它来计算，不会被.container的背景覆盖。可以用以下任意一种方法实现：

1. 给.gradient-box设置z-index: 0（或任意非auto的z-index值）
2. 给.gradient-box设置opacity: 0.99（透明度小于1会触发层叠上下文）
3. 给.gradient-box设置transform: translateZ(0)（3D变换会触发层叠上下文）

修改后的.gradient-box CSS示例：

.gradient-box {
  /* 保留原有所有属性 */
  z-index: 0; /* 添加这一行即可 */
}

这样伪元素就会被限制在.gradient-box的层叠上下文中，位于.gradient-box的下方，但不会被.container的背景覆盖，渐变边框就能正常显示了。

内容的提问来源于stack exchange，提问作者hungdoansy