如何在Electron应用程序上获得圆角?

时间:2018-07-10 10:15:02

标签: node.js electron atom-editor

我目前正在尝试在正在制作的 Electron 应用程序上弄圆圆角。
目前,我已经尝试了几乎所有在线可用的解决方案,但没有一个起作用。

我该如何在我的 Electron 应用程序中找到转折点?

1 个答案:

答案 0 :(得分:2)

制作无框透明窗口

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