如何为按钮边框单独设置backdrop-filter实现自适应背景的亮色边框效果

我想要为按钮添加彩色边框，按钮本身为带有backdrop-filter效果的透明模糊背景，边框需要根据按钮下方的背景自动调整为更亮/过饱和的效果，核心需求是为按钮边框单独应用backdrop-filter。

已尝试方案 #

• 直接将边框设置为透明白色：纯色背景下效果良好，但放置在图片上时效果不佳
• 尝试使用hsla()调整：可调整饱和度/亮度参数，但只能使用固定色相的颜色
• 在按钮后方放置轻微重叠的div并为其添加滤镜：纯色按钮场景下可用，但不符合按钮透明的需求

现有实现问题 #

我已经找到了一个临时解决方案，但实现方式比较粗糙且限制较多，当调大边框厚度时，边角的断层会非常明显。

现有实现代码 #

该实现为按钮四个边分别设置了独立div，以此获得调整灵活度：

HTML代码 #

<div id=wrapper>
    <a href="http://stackoverflow.com" class="links">Link
        <div class="linkT"></div>
        <div class="linkR"></div>
        <div class="linkB"></div>
        <div class="linkL"></div>
    </a>
</div>

CSS代码 #

:root {
    --thickness: 1.5px;
    --brightness: 2;
    --blur: 5px;
}

.linkT{
    border-radius: 50px 50px 0px 0px;
    height: var(--thickness);
    top: 0; 
    right: 0; 
    left: 0;
    background: transparent; 
    position: absolute;
    backdrop-filter: brightness(var(--brightness));
    filter: blur(var(--blur));
}

.linkR{
    border-radius: 0px 50px 50px 0px;
    width: var(--thickness); 
    top: 0;
    right: 0; 
    bottom: 0;
    background: transparent; 
    position: absolute;
    backdrop-filter: brightness(var(--brightness));
    filter: blur(var(--blur));
}

.linkB{
    border-radius: 0px 0px 50px 50px;
    height: var(--thickness); 
    right: 0; 
    bottom: 0;
    left:  0;
    background: transparent; 
    position: absolute;
    backdrop-filter: brightness(var(--brightness));
    filter: blur(var(--blur));
}

.linkL{
    border-radius: 50px 0px 0px 50px;
    width: var(--thickness);
    top: 0;  
    bottom: 0;
    left: 0;
    background: transparent; 
    position: absolute;
    backdrop-filter: brightness(var(--brightness));
    filter: blur(var(--blur));
}

现有实现限制 #

目前只能为边框应用2种滤镜（一个普通filter和一个backdrop-filter），测试后发现blur和brightness组合最符合预期效果。

请问这个方法有没有优化或者简化的空间？

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