VSCode不原生支持编辑器边框阴影，需通过vscode-custom-css插件注入CSS实现；直接修改editor.background等颜色配置无效，因其仅接受纯色值，不解析box-shadow等样式。
VSCode 默认不提供编辑器边框阴影（即 editor 区域外侧的投影），所谓“边框阴影”实际是通过自定义 workbench.colorCustomizations 配合窗口级 CSS 注入实现的视觉模拟，不是原生支持的功能。
为什么直接改 editor.background 无法加阴影
VSCode 的主题色配置项（如 editor.background、sideBar.background）只控制颜色，不支持 box-shadow、border-radius 等 CSS 样式。试图在 settings.json 中写 "box-shadow: 0 2px 8px rgba(0,0,0,0.15)" 会被完全忽略。
- 所有颜色配置项都属于 VSCode 主题系统，仅接受十六进制、RGB、named color 等纯色值
-
workbench.colorCustomizations不解析 CSS 属性，只映射预设色角色到具体颜色 - 真正生效的阴影必须通过注入自定义 CSS 实现，且仅在启用开发者工具并重载窗口后可见
用 vscode-custom-css 插件注入阴影（推荐方案）
这是目前最稳定、可复现的方式，依赖社区插件 vscode-custom-css + 手动编写 CSS 规则。注意：VSCode 1.84+ 启用 --enable-proposed-api 才能加载自定义样式，且每次更新 VSCode 后需重新运行 Enable Custom CSS and JS 命令。
- 安装插件
be5invis.vscode-custom-css - 创建本地 CSS 文件（如
~/vscode-shadow.css），写入：/* 只作用于编辑器主区域（不含侧边栏/状态栏） */ .monaco-editor .overflow-guard { box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15) !important; border-radius: 6px !important; overflow: hidden !important; } /* 若想给整个编辑器容器加阴影（含行号区），用这个选择器 */ .editor-instance > .monaco-editor { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.18) !important; border-radius: 8px !important; } - 在
settings.json中配置路径："vscode_custom_css.imports": ["file:///Users/xxx/vscode-shadow.css"] - 按
Cmd+Shift+P（macOS）或Ctrl+Shift+P（Win/Linux），执行Enable Custom CSS and JS，然后重启窗口
阴影位置偏移与层级冲突的常见问题
直接套用 box-shadow 容易导致视觉错位：比如阴影被侧边栏遮挡、滚动时阴影撕裂、高对比度主题下阴影发灰等。根本原因是 VSCode 的 DOM 结构中，编辑器区域（.monaco-editor）和侧边栏（.sidebar）是同级兄弟节点，z-index 默认无序。
- 避免用
z-index强行提层——VSCode 内部 z-index 由框架动态分配，硬设会导致菜单、提示浮层被盖住 - 阴影扩散值（第三参数）建议 ≤16px，否则在小屏或缩放 125% 时边缘被裁切
- 若使用深色主题，把阴影的 alpha 值调低（如
rgba(0,0,0,0.08)），否则会显得脏 - 不要对
.monaco-workbench加阴影——它包裹整个窗口，加了等于给整个 VSCode 外框加影，失去“编辑器局部层级感”的本意
真正起作用的从来不是阴影本身，而是阴影与周围 UI 元素的相对明暗关系和留白节奏。调参时盯着侧边栏交界处看两秒，比反复刷新更管用。
