VSCode悬浮提示(hover widget)圆角固定为4px且不可配置,仅能通过设置editorHoverWidget.border、editorHoverWidget.background和widget.shadow三者协同增强视觉辨识度。

VSCode悬浮提示(hover widget)本身不支持圆角配置
VSCode 没有提供 editorHoverWidget.borderRadius 或类似设置项,所有试图在 workbench.colorCustomizations 中添加 border-radius、cornerRadius 等 CSS 属性的写法均无效。该组件的圆角是硬编码为 4px 的,不可通过用户配置修改。
你看到的“圆角效果”实际来自两个固定行为:
- 悬停卡片默认渲染带 4px 圆角(无法调大或调小)
- 边框颜色 + 背景色 + 阴影三者协同,让圆角在视觉上更可辨识
为什么改了 editorHoverWidget.border 还看不见圆角?
根本原因不是圆角没生效,而是卡片区域“没画出来”——常见于以下情况:
-
editorHoverWidget.background未设置或值为"transparent",导致边框被背景吃掉 - 主题(如某些高对比度主题)覆盖了
editorHoverWidget.border,需显式在workbench.colorCustomizations中重写 - 你实际看到的是参数提示(
editor.parameterHints),它用的是独立 token:editor.parameterHints.border,和 hover 卡片无关 - VSCode 版本低于 1.70(2026 年已基本淘汰,但老旧定制版可能仍存在)
真正能调的只有边框+背景+阴影组合
要让那固定的 4px 圆角“看得见”,必须同步配置三项:
-
"editorHoverWidget.border": "#4a5568"—— 边框颜色,建议比背景稍亮(深色主题)或稍暗(浅色主题) -
"editorHoverWidget.background": "#1e1e1e"—— 必须设为非透明色,否则边框不可见 -
"widget.shadow": "rgba(0, 0, 0, 0.3)"—— 投影强化浮层感,让圆角轮廓更清晰
直接复制进 settings.json 的完整块如下:
"workbench.colorCustomizations": {
"editorHoverWidget.border": "#4a5568",
"editorHoverWidget.background": "#1e1e1e",
"widget.shadow": "rgba(0, 0, 0, 0.3)"
}
Fitten Code 的悬浮框圆角能调吗?
不能。Fitten Code 自定义的 fittenCode.tooltipStyle 支持 border.radius 字段,但它只控制自己绘制的 Webview 提示框(非 VSCode 原生 hover),且该 radius 实际作用于其内部 div 容器,不影响 VSCode 底层的 hover widget。
如果你启用了 "fittenCode.showFullTooltip": true,又同时看到两层提示(原生 hover + Fitten 的 Webview),说明插件正在叠加渲染——此时应禁用原生 hover(通过 "editor.hover.enabled": false)来避免干扰,否则圆角逻辑会打架。
最易被忽略的一点:VSCode 的 4px 圆角是写死的,任何美化都只是让它“更可见”,而非“可修改”。别在 border-radius 上浪费时间,盯紧 background 和 shadow 才是关键。


















