如何在电子应用程序上获得圆角？

Question

我目前正在尝试在我正在制作的电子应用程序上获得圆角。目前我已经尝试了几乎所有在线可用的解决方案，但没有一个有任何区别。

如何绕过 Electron 应用程序的四角？

Answer 1

制作无框透明窗

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

并且在渲染器中有这样的东西，或者直接将样式应用到 body 标签上

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

只需确保还添加了一个自定义窗口标题栏，-webkit-app-region: drag以便使窗口可从此元素拖动。

查看电子文档了解更多信息；) https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window