跳转到主要内容

自定义窗口样式

无边框窗口

Frameless Window

无边框窗口会移除操作系统添加的所有边框,包括窗口控件。

要创建无边框窗口,请在 BrowserWindow 构造函数中将 BaseWindowContructorOptionsframe 参数设置为 false

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

要创建完全透明的窗口,请在 BrowserWindow 构造函数中将 BaseWindowContructorOptionstransparent 参数设置为 true

下面的 Fiddle 利用了透明窗口和 CSS 样式来模拟圆形窗口的效果。

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
  • 透明窗口不可调整大小。在某些平台上,将 resizable 设置为 true 可能会导致透明窗口停止工作。
  • CSS blur() 滤镜仅适用于窗口的 Web 内容,因此无法将模糊效果应用于窗口下方的(即用户系统上打开的其他应用程序的)内容。
  • 打开开发者工具时,窗口将不会透明。
  • Windows
    • 使用 Windows 系统菜单或双击标题栏无法最大化透明窗口。有关原因,请参阅 PR #28207
  • macOS
    • 透明窗口不会显示原生窗口阴影。