如图,vscode编辑器选项卡顶部的渐变色可以在哪里修改?

Question

如图,vscode编辑器tab选项卡,我看老外顶部的border可以用渐变

但是我自己尝试后,发现只能在底部的border修改单一颜色

那么问题来了,像视频中老外顶部border带渐变的该怎么弄呢?
视频地址是https://www.bilibili.com/video/BV1y7421o7w8/

Answer 1

https://juejin.cn/post/7166984881631657992
原文的效果可以成功复现：

核心的css代码是这样的（原文的是在标签下方，我修改了下变成了在标签上方）：

/* 文件tab划过显示过渡条 */
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container.active
  > .title
  .tabs-container
  > .tab {
  position: relative;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container.active
  > .title
  .tabs-container
  > .tab::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px; /* 可以根据需要调整高度 */
  position: absolute;
  top: 0; /* 修改为顶部对齐 */
  left: 0;
  transition: all 0.4s;
  background: radial-gradient(
    circle at top right, /* 修改渐变起点为右上角 */
    hsl(230, 65%, 50%),
    hsl(290, 77%, 52%)
  ) !important;
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container.active
  > .title
  .tabs-container
  > .tab[aria-selected="true"]::after {
  width: 100%;
  background: radial-gradient(
    circle at right bottom,
    hsl(230, 65%, 50%),
    hsl(290, 77%, 52%)
  ) !important;
}

效果：

当然样式你可以自己调整，想改成什么样就改成什么样。