且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-20 08:25:40

制作无框透明窗口

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

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

And have something like this in the renderer, or apply the style directly to the body tag

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

只需确保还添加一个具有 -webkit-app-region: drag 的自定义窗口标题栏,以使窗口可从此元素拖动.

Just make sure to also add a custom window titlebar that has -webkit-app-region: dragin order to make the window dragable from this element.

查看 Electron 文档以获取更多信息;)https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window

Check out the Electron Docs for further informations ;) https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window