electron创建圆角窗口附带阴影效果

背景

一直想用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如下：

<body>
<div id="win">圆角窗口+阴影特效</div>
</body>

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：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>electron创建圆角窗口附带阴影效果</title>
    <style rel="stylesheet">
        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;
        }
    </style>
</head>
<body>
<div id="win">圆角窗口+阴影特效</div>
</body>
</html>

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 .，骚气的窗口就出来了。
希望这篇文章能帮助到你，不要像我一样到处踩坑。