时间戳

首页 > 解决方案 > 窗口透明时ElectronJS没有阴影

css - 窗口透明时ElectronJS没有阴影

问题描述

我是 ElectronJs 的新手，我终于想出了如何获得圆角。

然而，现在我开始工作了，我注意到我失去了窗户上的阴影，为什么？

您可以在下面找到电子特定代码的整个 main.js 文件。

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    frame: false,
    transparent: true,
    hasShadow: true
  });
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools();
  }
  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", () => {
  createWindow();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

});

标签： cssreactjselectron

解决方案

因此，根据他们的文档，这是 ElectronJS 的一个已知限制，这是因为您设置了“transparent = true”：

“在 Mac 上，本机窗口阴影不会显示在透明窗口上。”

https://www.electronjs.org/docs/api/frameless-window#limitations

推荐阅读