跳转至

自定义窗口样式

无边框窗口

无边框窗口

无边框窗口会移除操作系统应用的所有 chrome，包括窗口控件。

要在 BrowserWindow 构造函数中创建无边框窗口，请将 [BaseWindowContructorOptions][] 的 frame 参数设置为 false。

```fiddle docs/fiddles/features/window-customization/custom-window-styles/frameless-windows

在 Wayland（Linux）上，无边框窗口默认具有 GTK 投影和扩展的缩放边界。要创建完全无边框且无装饰的窗口，请在窗口构造函数选项中设置 `hasShadow: false`。

## 透明窗口 {#transparent-windows}

![透明窗口](https://raw.atomgit.com/GitHub_Trending/el/electron/raw/7880c689d542b83e9643a6a3acb6ea853d95edfc/docs/images/transparent-window.png)
![macOS 调度中心中的透明窗口](https://raw.atomgit.com/GitHub_Trending/el/electron/raw/7880c689d542b83e9643a6a3acb6ea853d95edfc/docs/images/transparent-window-mission-control.png)

要在 `BrowserWindow` 构造函数中创建完全透明的窗口，请将 [`BaseWindowContructorOptions`][] 的 `transparent` 参数设置为 `true`。

以下 fiddle 示例利用透明窗口和 CSS 样式，营造出圆形窗口的视觉效果。

```fiddle docs/fiddles/features/window-customization/custom-window-styles/transparent-windows

限制

  • 无法点击穿过透明区域。详情见 #1335。
  • 透明窗口不可调整大小。将 resizable 设置为 true 可能导致透明窗口在某些平台上失效。
  • CSS [blur()][] 滤镜仅适用于窗口的 Web 内容，因此无法对窗口下方的内容（即用户系统上打开的其他应用程序）应用模糊效果。
  • 打开 DevTools 时，窗口不会透明。
  • 在 Windows 上：
  • 透明窗口无法通过 Windows 系统菜单或双击标题栏来最大化。相关原因可在 PR #28207 中查看。
  • 在 macOS 上：
  • 透明窗口不会显示原生窗口阴影。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron