如何实现带渐变动画模糊边框的黑底白字按钮？

要实现你需要的按钮效果（黑底白字、渐变动画边框、边框模糊），可以通过调整伪元素层级、添加模糊滤镜和内部遮罩层来完成，修改后的CSS代码如下：

@keyframes gradient {
    to {
        background-position: 200% center;
    }
}

#degradebtn {
    position: relative;
    background: #000;
    color: #fff;
    padding: 12px 24px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

#degradebtn::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: linear-gradient(45deg, red, yellow, lime, cyan, blue, magenta, red);
    background-size: 800% auto;
    animation: gradient 8s infinite linear;
    filter: blur(4px);
    z-index: -2;
}

#degradebtn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    z-index: -1;
    border-radius: 4px;
}

关键调整说明： #

• 边框模糊效果：给::before伪元素添加filter: blur(4px)，可根据视觉需求调整模糊数值。
• 保留纯黑主体：新增::after伪元素，用纯黑色覆盖按钮整个内部区域，让::before的渐变仅在按钮边缘（超出按钮的部分）显示，形成模糊边框的视觉效果。
• 圆角适配：统一设置按钮和伪元素的border-radius，确保圆角处的模糊渐变效果和预期一致。
• 层级管理：通过z-index控制层级，保证按钮文字在最上层，::after遮罩层在中间，::before渐变层在最底层，避免元素遮挡问题。

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