如何移除Visual Studio Code窗口灰色边框并保留圆角与阴影？

效果对比 #

• 带有灰色边框：
  
• 目标无边框效果：
  

问题描述 #

尝试移除Visual Studio Code窗口的灰色边框，但使用扩展工具时会同时消除圆角，希望找到仅移除边框、保留圆角和窗口阴影的方法。

解决方案：自定义窗口CSS #

通过自定义CSS可以精准控制VS Code的窗口样式，步骤如下：

1. 安装Custom CSS and JS Loader扩展，用于加载自定义样式文件。
2. 在本地创建一个CSS文件（例如vscode-custom-border.css），写入以下代码：

/* 移除窗口灰色边框 */
.titlebar,
.windows-titlebar,
.macos-titlebar,
.monaco-workbench .part.editor > .content .editor-group-container > .title {
    border: none !important;
}

/* 强制保留圆角与阴影（按需调整） */
.monaco-workbench {
    border-radius: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 8px !important;
}

3. 打开VS Code设置，搜索Custom CSS: Stylesheets，将创建的CSS文件绝对路径添加到配置项中。
4. 重启VS Code，右下角会弹出样式应用提示，点击重启即可生效。

注意：VS Code更新后自定义样式可能失效，需打开Custom CSS and JS Loader扩展面板，点击"Reload Custom CSS"重新注入样式。不同系统的标题栏选择器略有差异，可根据自身系统微调CSS中的选择器。

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