如何在小屏幕上淡出元素的右侧？

Question

我有一个包含三个选项卡的网页。当屏幕尺寸为 <= 640px. My SCSS was doing that, but the styles aren't applying after moving folders. Right now, it only fades the content within it. I want the last tab to fade 30% on it's right.

时，我希望最后一个选项卡在右侧部分淡出

我尝试使用模糊和渐变，它仅适用于文本，但不适用于选项卡的轮廓。

试验1：

````
@import '../../../样式/变量';

.tabs {
    列表样式类型：无；
    填充：0；
    显示：柔性；
    背景颜色：$universal-white-color；
    边框半径：30px；
    溢出：隐藏；
}

.tabs李{
    位置：相对；
    左内边距：30px；
    右内边距：30px；
    顶部填充：10px；
    底部填充：10px；
    高度：40px；
    保证金：1rem；
    颜色：$primary；
    文本对齐：居中；
    显示：柔性；
    对齐项目：居中；
    调整内容：居中；
    边框半径：30px；
    轮廓：2px 实心$primary-border-color；
    光标：指针；
    过渡：背景颜色 0.3s 缓动；
    不透明度：1；
    弹性：1；
    空白：nowrap；

    @media（最大宽度：1024px）{
        左边距：10px；
    }

    @media（最大宽度：768px）{
        余量：0.5rem；
        内边距：10px 30px；
    }

    @media（最大宽度：640px）{
        保证金：1rem；
        左边距：0；
        内边距：10 像素 25 像素；
    }
}

@media（最大宽度：640px）{
    .tabs li:第一个子项 {
        左边距：10%；
    }

    .tabs li:last-child::after {
        内容： '';
        位置：绝对；
        前10名％;
        右：0；
        底部：-10%；
        宽度：30%；
        背景：$universal-white-color；
        滤镜：模糊（4px）；
        z 索引：1；
    }
}

.tabs li.active {
    背景颜色：$primary；
    颜色：$universal-white-color；
}

.tab:not(.active) {
    背景颜色：$universal-white-color；
    颜色：$primary；
}

.tabs li:悬停{
    背景颜色：$primary-hover-color；
    颜色：$primary；
}

````

我想要实现的目标看起来有点像这样： 模糊最后一个选项卡右侧的 30%

Answer 1

可能有帮助

 <div id="overlay"></div>

#overlay{
position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  cursor: pointer;
  background-image: linear-gradient(to right, #f000 60%, yellow);
}