如何在Electron应用程序上获得圆角? [英] How to get rounded corners on an Electron app?

问题描述

我目前正在尝试在我正在开发的Electron应用程序上弄圆圆角.目前，我已经尝试了几乎所有在线可用的解决方案，但是它们都没有任何作用.

I am currently trying to get rounded corners on an Electron application I'm making. I have tried nearly every solution available on-line at the moment, but none of them make any difference.

我该如何处理我的Electron应用程序的角落?

How can I round the corners of my Electron app?

推荐答案

制作无框透明窗口

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.

查看电子文档以获取更多信息;) 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

这篇关于如何在Electron应用程序上获得圆角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！