Electron BrowserWindow 实现圆角窗口 - 无边框窗口圆角技巧 - 常规

要在 Electron 的 BrowserWindow 中实现窗口圆角，可以使用 CSS 样式来实现。

首先，在创建 BrowserWindow 时需要设置 frame 为 false，这样可以去掉窗口的边框。

const { BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

然后，在 HTML 文件中添加 CSS 样式，通过 border-radius 属性来设置窗口的圆角。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #window {
        width: 800px;
        height: 600px;
        border-radius: 20px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id='window'>
      <!-- 窗口内容 -->
    </div>
  </body>
</html>

这样就可以在 electron 的 BrowserWindow 中实现窗口圆角了。需要注意的是，由于去掉了窗口边框，窗口的拖拽和缩放功能需要通过 JavaScript 代码来实现。

Electron BrowserWindow 实现圆角窗口 - 无边框窗口圆角技巧