我正在尝试在按钮周围制作边框。这个边框应该是一个渐变，所以我只是想制作一个更大的按钮，而上面的按钮下面没有功能。由于某种原因，无论我做什么，它们都不会按照我想要的方式分层。
代码如下：
<!DOCTYPE html>
<html lang="se">
<head>
<style>
.knap{
width: 250px;
height: 50px;
border-radius: 200px;
align-content: center;
background-color: #161a20;
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::after{
content: '';
position: absolute;
height: 105%;
width: 105%;
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1;
}
.wrap{
display: flex;
justify-content: center;
align-items: center;
}
#b1{
margin-top: 50px;
z-index: 100;
}
</style>
</head>
<body>
<div class="wrap">
<button class="knap" id="b1">About me</button>
</div>
</body>
</html>
我尝试过更改 z-index，我也尝试过在包装器 div 中搞乱，但据我所知，没有任何效果。
.knap{
width: 250px;
height: 50px;
border-radius: 200px;
align-content: center;
background-color: #161a20;
border: none;
color: white;
background: linear-gradient(to bottom left, #008cff, #e100ff);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative;
z-index: 1;
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
}
.knap::before{
content: '';
position: absolute;
/* height: 105%;
width: 105%; */
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
border-radius: 200px;
background: black;
z-index: -1;
}
.knap::after {
content: attr(data);
/* background: linear-gradient(to left, #00FFA3, #DC1FFF);*/
-webkit-background-clip: text;
color: transparent;
}
.wrap{
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="se">
<head>
</head>
<body>
<div class="wrap">
<button class="knap" id="b1">About me</button>
</div>
</body>
</html>给你，我更改了一些值，但注释掉了你的:)