这个问题确实挺棘手的——因为Electron的transparent: true属性默认会强制窗口变成无边框模式，所以你之前的尝试才会看不到边框，同时背景还是白色。不过针对不同操作系统，我们有不同的办法实现带边框的透明窗口，下面给你详细拆解：

核心限制说明 #

首先得明确：当你给BrowserWindow设置transparent: true时，Electron会自动把frame属性设为false（也就是无边框），哪怕你手动指定frame: true也不会生效。这是Electron的设计限制，因为透明窗口在多数系统上需要脱离原生窗口管理器的边框渲染逻辑。所以我们得绕开这个默认行为，用系统原生API来实现。

Windows平台解决方案 #

在Windows上，我们可以通过调用Win32 API把窗口设置为分层窗口，指定某个颜色作为"透明键"，让页面中这个颜色的区域变成透明，同时保留原生边框。

具体步骤 #

1. 安装依赖：我们需要ffi-napi和ref-napi来调用Win32 API：

npm install ffi-napi ref-napi

2. 编写窗口代码：

const { BrowserWindow } = require('electron');
const ffi = require('ffi-napi');
const ref = require('ref-napi');

// 定义Win32 API函数
const user32 = ffi.Library('user32', {
  'SetWindowLongPtrA': ['long', ['long', 'int', 'long']],
  'GetWindowLongPtrA': ['long', ['long', 'int']],
  'SetLayeredWindowAttributes': ['bool', ['long', 'uint', 'byte', 'uint']]
});

// 定义API常量
const GWL_EXSTYLE = -20;
const WS_EX_LAYERED = 0x80000;
const LWA_COLORKEY = 0x00000001;

// 创建窗口（不要设置transparent: true）
const previewWindow = new BrowserWindow({
  width: 800,
  height: 600,
  x: 1000,
  y: 100,
  frame: true, // 明确保留边框
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false // 生产环境建议改用IPC通信，这里为了示例简化
  }
});

// 窗口就绪后设置透明属性
previewWindow.on('ready-to-show', () => {
  // 获取窗口句柄
  const hwnd = previewWindow.getNativeWindowHandle();
  // 获取当前窗口扩展样式
  const exStyle = user32.GetWindowLongPtrA(hwnd.readInt32LE(), GWL_EXSTYLE);
  // 添加分层窗口样式
  user32.SetWindowLongPtrA(hwnd.readInt32LE(), GWL_EXSTYLE, exStyle | WS_EX_LAYERED);
  // 设置白色为透明色（页面中白色区域会变成透明）
  user32.SetLayeredWindowAttributes(hwnd.readInt32LE(), 0xFFFFFF, 255, LWA_COLORKEY);
});

previewWindow.loadFile('your-page.html');

3. 页面CSS设置：把body背景设为白色，这样窗口背景就会透明：

body {
  background: #ffffff;
  margin: 0; /* 避免默认边距导致的非透明区域 */
}

注意事项 #

• 页面中所有白色内容都会变成透明，所以如果需要内容不透明，要避免使用白色，或者替换成其他透明键颜色。
• 如果想要整体半透明（包括边框），可以把LWA_COLORKEY换成LWA_ALPHA，并调整第三个参数（0-255的透明度值），但这样边框也会变透明，可能不是你想要的效果。

macOS平台解决方案 #

macOS的原生窗口系统支持带边框的半透明效果，Electron提供了官方的vibrancy属性来实现，不需要额外依赖，更稳定。

具体代码 #

const previewWindow = new BrowserWindow({
  width: 800,
  height: 600,
  x: 1000,
  y: 100,
  frame: true,
  vibrancy: 'popover', // 可选值：ultra-dark, dark, light, popover等，对应不同的系统透明风格
  webPreferences: {
    nodeIntegration: true
  }
});

页面CSS设置：

body {
  background: transparent;
  margin: 0;
}

效果说明 #

设置vibrancy后，窗口背景会呈现和系统一致的半透明模糊效果，同时保留原生窗口边框。如果需要更接近"完全透明"的效果，可以尝试vibrancy: 'fullscreen-ui'，但最终效果会受系统主题影响。

Linux平台解决方案 #

Linux的桌面环境差异很大（GNOME、KDE、Xfce等），没有通用的解决方案。你可以尝试类似Windows的分层窗口方法，或者针对特定桌面环境使用GTK API，但兼容性较差。如果你的应用主要面向Windows/macOS，建议优先适配这两个平台。

总结 #

没有跨所有平台的完美方案，因为不同操作系统的窗口管理机制差异很大。建议在代码中通过process.platform判断当前系统，分别应用对应的方案：

if (process.platform === 'win32') {
  // Windows逻辑
} else if (process.platform === 'darwin') {
  // macOS逻辑
} else {
  // Linux fallback或提示不支持
}

内容的提问来源于stack exchange，提问作者Tomáš Hübelbauer