z-index未按预期生效，按钮渐变边框层级问题求助

问题根源 #

你尝试用按钮的::after伪元素做渐变边框载体，但存在两个核心问题：

1. 伪元素是按钮的子元素，即便设置z-index: -1，也会处于按钮自身堆叠上下文的父元素背景之上，导致按钮的实色背景被伪元素覆盖，无法呈现「边框在按钮下方」的效果。
2. 伪元素未设置居中定位，默认左上角与按钮对齐，仅右下角露出渐变，不符合环绕边框的预期。

修复方案一：调整伪元素层级与定位（基于现有结构修改） #

通过新增伪元素承载按钮的深色背景，原伪元素作为渐变边框，配合定位和z-index实现分层：

.knap{
    width: 250px;
    height: 50px;
    border-radius: 200px;
    background-color: transparent; /* 改为透明，让底层伪元素显示 */
    border: none;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 新增伪元素作为按钮的深色背景 */
.knap::before{
    content: '';
    position: absolute;
    inset: 0; /* 覆盖整个按钮区域 */
    border-radius: inherit;
    background-color: #161a20;
    z-index: 1; /* 确保背景在边框之上 */
}

.knap::after{
    content: '';
    position: absolute;
    height: 105%;
    width: 105%;
    border-radius: inherit;
    background-image: linear-gradient(to bottom left, #008cff, #e100ff);
    z-index: 0; /* 边框在背景之下 */
    /* 居中定位，让边框环绕按钮 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 确保按钮文字在最上层 */
.knap span{
    position: relative;
    z-index: 2;
}

对应HTML修改（给按钮文字加span）：

<div class="wrap">
 <button class="knap" id="b1"><span>About me</span></button>
</div>

修复方案二：用父元素伪元素承载边框（更简洁） #

将渐变边框移到父元素.wrap的伪元素中，按钮直接置于上方，避免子元素堆叠层级冲突：

.knap{
    width: 250px;
    height: 50px;
    border-radius: 200px;
    background-color: #161a20;
    border: none;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 为伪元素提供定位上下文 */
    margin-top: 50px; /* 把按钮的margin移到父元素 */
}

.wrap::after{
    content: '';
    position: absolute;
    height: 105%;
    width: 105%;
    border-radius: 200px;
    background-image: linear-gradient(to bottom left, #008cff, #e100ff);
    z-index: -1; /* 边框置于按钮下方 */
}

对应HTML修改（移除按钮的id样式）：

<div class="wrap">
 <button class="knap">About me</button>
</div>

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