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

2022-05-15 · 4433

实现原理其实很简单

1.做一个无边框的透明窗口

index.js

new BrowserWindow({
        width: 750,
        height: 750,
        frame: false, //设置为无边框
        transparent: true, //使用透明窗口
        backgroundColor: '#00000000', //设置背景色为全透明
})

2.在css中做圆角和阴影

html

<body>
    <div id="win">
        <div id="header">
            我是标题
            <div class="close">
                [关闭窗口]
            </div>
        </div>
    </div>
</body>

css

<style>
    body {
        position: fixed;
        width: 100%;
        height: 100%;
        /**设置body背景也是透明的*/
        background-color: rgba(0, 0, 0, 0);
        /**内边距做个20像素，为了显示阴影的模糊状态*/
        padding: 20px;
        box-sizing: border-box;
    }

    /*win就是真正要被显示出来的窗口了*/
    #win {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /*设置窗口背景为白色*/
        background-color: #fff;
        /*圆角*/
        border-radius: 20px;
        /*阴影*/
        box-shadow: 1px 1px 10px grey;
    }

    /* 做一个标题栏 设置可拖动状态 */
    #header {
        position: relative;
        background-color: rgb(255, 206, 206);
        line-height: 50px;
        text-align: center;

        /*设置可以拖拽*/
        -webkit-app-region: drag;
    }

    /* 做一个关闭按钮  设置不可拖动状态 */
    #header>.close {
        position: absolute;
        right: 10px;
        top: 0;

        /*设置不可以拖拽  如果没有这项按钮就不能点击了*/
        -webkit-app-region: drag;
    }
</style>

效果：