跳转到主内容

自定义窗口样式

无边框窗口​

Frameless Window

A frameless window removes all chrome applied by the OS, including window controls.

To create a frameless window, set the BaseWindowContructorOptions frame param in the BrowserWindow constructor to false.

docs/fiddles/features/window-customization/custom-window-styles/frameless-windows (35.1.2)Open in Fiddle
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 300,
    height: 200,
    frame: false
  })
  win.loadURL('https://example.com')
}

app.whenReady().then(() => {
  createWindow()
})

透明窗口​

Transparent Window Transparent Window in macOS Mission Control

To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the BrowserWindow constructor to true.

The following fiddle takes advantage of a tranparent window and CSS styling to create the illusion of a circular window.

docs/fiddles/features/window-customization/custom-window-styles/transparent-windows (35.1.2)Open in Fiddle
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 100,
    height: 100,
    resizable: false,
    frame: false,
    transparent: true
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

局限性​

  • 你不能点击穿透透明区域。 更多细节参见 #1335。
  • 透明窗口不可调整大小。 Setting resizable to true may make a transparent window stop working on some platforms.
  • CSS blur() 选择器仅适用于网页，因此无法对位于透明窗口下方的内容应用模糊效果 (例如在用户系统上打开的其他应用程序) 。
  • 当打开开发者工具时，窗口将不透明。
  • On Windows:
    • 当DWM禁用时，透明窗口将失效。
    • Transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on PR #28207.
  • On macOS:
    • 在 Mac 上, 原生窗口阴影不会显示在透明窗口中。