如何在Electron应用程序中实现圆角？

Question

我目前正在尝试在制作的Electron应用程序上获得圆角。 我已经尝试了目前网上的几乎所有解决方案，但它们都没有任何区别。

我该如何使我的Electron应用程序的边角变成圆角？

- Cody Thompson

Answer 1

制作一个无边框透明窗口

const myWindow = new BrowserWindow({
    transparent: true, 
    frame: false
})

在渲染器中添加类似这样的内容，或者直接将样式应用于标签

<div style="width: 500px; height: 500px; border-radius: 5px">My window content</div>

请确保还添加了自定义窗口标题栏，其中包含 -webkit-app-region: drag，以便可以从该元素拖动窗口。

有关更多信息，请查看Electron文档；） https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window

- Hans Koch

---

我已经尝试过这个方法，但不知为何在将半径添加到body标签时无法正常工作。相反，我使用了透明框架并将半径应用于我正在使用的标题栏div，这样就解决了问题。不知道为什么它不能按照文档中所说的方式工作。 - Cody Thompson

我遇到了一些问题，因为我打开了开发工具，所以它没有起作用。翻白眼 - Chris

抱歉，这句话无法完全理解其含义和上下文。请提供更多信息或背景，以便我可以更好地进行翻译。 - userA789

不支持Linux操作系统。请查看https://dev59.com/pFQJ5IYBdhLWcg3wBRE4#54780438。 - MRebati

Answer 2

对我来说，它是这样起作用的：

const mainWindow = new BrowserWindow({
  width: 1360,
  height: 726,
  minWidth: 1360,
  minHeight: 726,
  frame: false,
  transparent: true,
  backgroundColor: '#00FFFFFF',
})

- Luiz F. Alves da Silva