时间戳

首页 > 解决方案 > 如何在电子应用程序中制作圆角

html - 如何在电子应用程序中制作圆角

问题描述

const electron = require("electron");
const {app, BrowserWindow, globalShortcut} = electron;
const path = require("path");

function createWindow(){
    win = new BrowserWindow({
        width: 1000, 
        height: 750, 
        icon: path.join(__dirname,'\checked.png'),
        frame: false,
        fullscreenable:false,
        // radii: [5,5,5,5],
        // transparent:true

    });

    win.loadFile('mainWindow.html')
    win.setMenu(null);
}

角落总是有一个白色的边框间隙，使其成为矩形。

试图增加css的边框大小，但一切都扩大了。

标签： htmlcssnode.jselectron

解决方案

关键特性是：frame: false和transparent: true（你错过了后者）

js 

const {app, BrowserWindow} = require('electron')
const path = require('path')

app.once('ready', () => {
  let win = new BrowserWindow({
    frame: false,
    transparent: true
  })
  win.loadURL(path.join(__dirname, '/roundedcorner.html'))
})

html 

<html>
  <body>
      <p style="border-radius: 25px; background: #73AD21; height: 300px;"></p>
  </body>
</html>

推荐阅读