背景
一直想用electron创建圆角窗口，奈何在网上找了一整天，也没找到解决办法。真的是让人崩溃，学electron就是冲着好看的UI来的，若不能发挥CSS强大的UI特效，我学你有何用。不过就在要放弃时，终于摸索出门路。
严格意义上来讲，electron是无法真正创建圆角带阴影窗口的。但是通过一些障眼法，可以创建出类似效果，废话貌似有点多，接下来正式开讲。
开局一张图：
首先创建HTML、main.js、package.json等文件，这不多说，electron必备文件。
main.js关键代码如下：
win = new BrowserWindow({
width: 520,
height: 320,
transparent: true,
backgroundColor: '#00000000',
frame: false,
resizable: false
})
因为electron创建的主窗口既不能倒圆角，也无法添加阴影，我曾经想从这里突破，查看BrowserWindow属性文档后发现没有这些属性。所以要想有圆角，BrowserWindow的主窗口就必须消失，设置transparent: true，即主窗口透明，不让它碍事。backgroundColor: '#00000000',背景色也需要透明。然后frame: false，先得无边框才能有圆角。这两项是必须的，圆角只能通过操作CSS才能得到。
然后创建一个div，HTML如下：
圆角窗口+阴影特效
CSS如下：
body{
background-color: rgba(0,0,0,0);
}
#win{
width: 500px;
height: 300px;
text-align: center;
background-color: #FFFAE8;
border-radius: 30px;
box-shadow:8px 8px 10px grey;
-webkit-app-region: drag;
}
注意，最关键的地方，body的CSS一定要背景色透明。（后来发现上方backgroundColor: '#00000000'也能实现，可以二选一）这是我摸索好久才总结的。如果不这样，窗口边角永远会有颜色，而得不到圆角。这是我不断的改变各个元素的背景色发现的，开始以为是html、div等的背景色在作怪。最后发现是body（知道后我感动得流泪横飞，挣扎了太久，没想到真相竟然是这样）。然后border-radius: 30px得到圆角，这里要注意，div若有子元素，子元素也要记得倒圆角，不然会将父元素幸幸苦苦倒的圆角又变回直角。
然后来个box-shadow:8px 8px 10px grey，加个边框阴影，看起来更有质感，像悬浮着。这里我习惯右下角有阴影，像左上角有光源照射一样。你可以添加你喜欢的阴影。不过要注意，在刚才的main.js中，要将透明的主窗口调的比div稍大一些，别让主窗口把div的阴影给切断了。
如图，故意将主窗口调成绿色示意：
实际主窗口是透明的，为了示意，将主窗口调成绿色。想说的是得给窗口阴影预留一点显示空间。并且尽量让主窗口大小贴近div，因为虽然主窗口看不见，但却是真实存在的。
无边框后窗口无法移动，在div的CSS中加入-webkit-app-region: drag就可以拖动了。如果你不想点击div内的子元素时拖动窗口，如总不能按个Button却拖动了窗口，可以在子元素CSS里加-webkit-app-region: no-drag。建议定义一个专门的空白区域用来移动窗口，这样更简单。至于关闭窗口就得自定义一个Button什么的去关闭啦。
到此，就基本结束了。顺便附上完整代码：
HTML：
electron创建圆角窗口附带阴影效果
圆角窗口+阴影特效
main.js:
const { app, BrowserWindow } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 520,
height: 320,
transparent: true,
backgroundColor: '#00000000',
frame: false,
resizable: false,
})
// 加载index.html文件
win.loadFile('index.html')
// 打开开发者工具
//win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
package.json:
{
"name": "demo",
"version": "1.0.0",
"main": "main.js"
}
最后终端运行electron .，骚气的窗口就出来了。
希望这篇文章能帮助到你，不要像我一样到处踩坑。