小屏幕下如何实现最后一个Tab右侧30%区域渐隐效果？

我有一个包含三个Tab的网页，希望在屏幕宽度≤640px时，让最后一个Tab的右侧30%区域实现渐隐效果。原本的SCSS代码可以实现该效果，但移动文件夹后样式不再生效——目前仅能模糊Tab内的内容，无法模糊Tab的边框。尝试过使用blur和gradient，但效果仅作用于文本而非Tab轮廓。

当前效果：仅模糊Tab内文本，Tab边框无模糊效果
期望效果：最后一个Tab右侧30%区域（包括边框）实现渐隐模糊

@import '../../../styles/variables';

.tabs {
    list-style-type: none;
    padding: 0;
    display: flex;
    background-color: $universal-white-color;
    border-radius: 30px;
    overflow: hidden;
}

.tabs li {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 40px;
    margin: 1rem;
    color: $primary;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    outline: 2px solid $primary-border-color;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1;
    flex: 1;
    white-space: nowrap;

    @media (max-width: 1024px) {
        margin-left: 10px;
    }

    @media (max-width: 768px) {
        margin: 0.5rem;
        padding: 10px 30px;
    }

    @media (max-width: 640px) {
        margin: 1rem;
        margin-left: 0;
        padding: 10px 25px;
    }
}

@media (max-width: 640px) {
    .tabs li:first-child {
        margin-left: 10%;
    }

    .tabs li:last-child::after {
        content: '';
        position: absolute;
        top: -10%;
        right: 0;
        bottom: -10%;
        width: 30%;
        background: $universal-white-color;
        filter: blur(4px);
        z-index: 1;
    }
}

.tabs li.active {
    background-color: $primary;
    color: $universal-white-color;
}

.tab:not(.active) {
    background-color: $universal-white-color;
    color: $primary;
}

.tabs li:hover {
    background-color: $primary-hover-color;
    color: $primary;
}

第一步：修正变量导入路径 #

移动文件夹后，首先检查@import '../../../styles/variables';的相对路径是否匹配新的文件夹结构，确保SCSS变量能正常加载，否则会导致颜色、边框等样式异常。

第二步：调整模糊效果实现逻辑 #

原代码的伪元素仅覆盖Tab内容区域，无法覆盖外部的outline（outline不占布局空间），因此改用backdrop-filter实现模糊，并扩大伪元素范围覆盖outline：

修改后的完整SCSS代码：

// 根据新文件夹结构调整此路径，确保变量能正常导入
@import '../../../styles/variables';

.tabs {
    list-style-type: none;
    padding: 0;
    display: flex;
    background-color: $universal-white-color;
    border-radius: 30px;
    overflow: hidden;
}

.tabs li {
    position: relative;
    padding: 10px 30px;
    height: 40px;
    margin: 1rem;
    color: $primary;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    outline: 2px solid $primary-border-color;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1;
    flex: 1;
    white-space: nowrap;

    @media (max-width: 1024px) {
        margin-left: 10px;
    }

    @media (max-width: 768px) {
        margin: 0.5rem;
        padding: 10px 30px;
    }

    @media (max-width: 640px) {
        margin: 1rem 1rem 1rem 0;
        padding: 10px 25px;
    }
}

@media (max-width: 640px) {
    .tabs li:first-child {
        margin-left: 10%;
    }

    .tabs li:last-child {
        // 允许伪元素超出Tab范围，覆盖外部的outline
        overflow: visible;
    }

    .tabs li:last-child::after {
        content: '';
        position: absolute;
        // 扩大范围，覆盖2px的outline区域
        top: -4px;
        right: -4px;
        bottom: -4px;
        width: 30%;
        // 模糊下方的Tab边框和内容
        backdrop-filter: blur(4px);
        // 渐变背景实现自然渐隐
        background: linear-gradient(to left, $universal-white-color 0%, transparent 100%);
        z-index: 1;
    }
}

.tabs li.active {
    background-color: $primary;
    color: $universal-white-color;
}

.tab:not(.active) {
    background-color: $universal-white-color;
    color: $primary;
}

.tabs li:hover {
    background-color: $primary-hover-color;
    color: $primary;
}

关键修改点说明 #

1. 扩大伪元素范围：将伪元素的top/right/bottom设为-4px，确保覆盖Tab的2px outline边框。
2. 改用backdrop-filter：替代原有的白色背景+filter，直接模糊伪元素下方的Tab边框和内容。
3. 配合线性渐变：用linear-gradient实现从白色到透明的过渡，让渐隐效果更自然。
4. 修正margin写法：简化640px断点下的margin样式，避免冗余。

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