我完全懂这种挫败感——花了好功夫做的启动/关闭动画，结果窗口一失焦就冒出个边框，直接破坏了整体的视觉体验。结合你的场景（窗口尺寸大于内容区域的无框窗口），给你几个可行的解决思路：

1. 强化窗口的无框属性配置 #

除了已经设置的frame: false和thickFrame: false，再添加几个属性彻底抑制系统默认的窗口装饰：

mainWindow = new BrowserWindow({
  frame: false,
  thickFrame: false,
  titleBarStyle: 'hidden', // 隐藏标题栏相关的所有渲染元素
  titleBarOverlay: false,  // 禁用Windows 11+的标题栏覆盖层
  backgroundColor: '#你的内容背景色', // 设为和内容区域一致的颜色，即使有边框也会被覆盖
  // 注意：如果你的窗口不需要透明效果，不要添加transparent: true，否则可能引发其他兼容性问题
});

2. 移除内容区域的焦点轮廓 #

有时候系统显示的边框其实是内容元素获得焦点时的默认轮廓，在渲染进程的CSS中添加全局样式：

*:focus {
  outline: none !important;
}

这样可以确保任何元素获得焦点时都不会显示默认焦点边框，避免系统把这个轮廓误判为窗口边框。

3. 监听焦点事件动态调整窗口样式 #

如果上面的方法无效，可以监听窗口的blur和focus事件，手动控制窗口的阴影/边框状态：

// 窗口失焦时关闭阴影（部分系统会把阴影和边框关联渲染）
mainWindow.on('blur', () => {
  mainWindow.setHasShadow(false);
});

// 窗口聚焦时恢复阴影（如果你的设计需要阴影效果）
mainWindow.on('focus', () => {
  mainWindow.setHasShadow(true);
});

要是问题是Windows系统特有的边框，还可以尝试在blur事件中临时让窗口尺寸和内容区域一致，聚焦时再恢复——不过这个方法需要结合你的动画逻辑调整，避免影响动画效果。

4. 换一种动画实现思路（从根源避免问题） #

你的窗口尺寸大于内容区域是为了动画，或许可以换个思路：让窗口尺寸和内容区域保持一致，通过CSS的transform或margin实现展开/收缩动画，而非调整窗口本身的尺寸。这样系统不会识别到窗口和内容的尺寸差异，也就不会触发默认边框渲染了。比如在渲染进程中：

.content-container {
  transition: transform 0.3s ease;
}

/* 展开状态 */
.content-container.expanded {
  transform: scale(1);
}

/* 收缩状态 */
.content-container.collapsed {
  transform: scale(0.8);
}

这种方式完全在内容区域内完成动画，还能避免无框窗口的各种兼容性问题。

内容的提问来源于stack exchange，提问作者Florent Gz