javascript - Electron 在窗口中形成透明圆圈？

Question

有什么方法可以使 Electron 窗口的一部分透明？例如，移动移动的区域？
我的 Electron 文件中有以下代码段:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    transparent: true,
    frame: false,
    ...
  })

以及以下 CSS:

html, body {
  cursor: none;
  background-color: #121212;
}

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

当我禁用 html 的背景颜色时，一切都按预期工作，圆圈是透明的，窗口也是如此:

问题是当我显示背景颜色时，我可以通过光标后面的圆圈看到背景:

我试图让它在跟随光标位置的那个圆圈内是透明的，所以我可以通过光标跟随圆圈看到 Electron 窗口后面的桌面。

Answer 1

弄清楚了!
原来我可以使用 box-shadow围绕光标圈:

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 1);
}

感谢: Hole in overlay with CSS