如何在电子应用程序中使圆角变圆

时间:2018-08-27 18:41:16

标签: html css node.js electron

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的边框大小,但一切都会扩展。

1 个答案:

答案 0 :(得分:1)

关键的属性是:frame: falsetransparent: 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>