Custom Window Styles
Frameless windows
A frameless window removes all chrome applied by the OS, including window controls.
To create a frameless window, set the BaseWindowContructorOptions frame param in the BrowserWindow constructor to false.
docs/fiddles/features/window-customization/custom-window-styles/frameless-windows (39.0.0)
[画像:Transparent Window] [画像:Transparent Window in macOS Mission Control]
To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the BrowserWindow constructor to true.
The following fiddle takes advantage of a transparent window and CSS styling to create the illusion of a circular window.
docs/fiddles/features/window-customization/custom-window-styles/transparent-windows (39.0.0) UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<linkhref="./styles.css"rel="stylesheet">
<title>Transparent Hello World</title>
</head>
<body>
<divclass="white-circle">
<div>Hello World!</div>
</div>
</body>
</html>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<linkhref="./styles.css"rel="stylesheet">
<title>Transparent Hello World</title>
</head>
<body>
<divclass="white-circle">
<div>Hello World!</div>
</div>
</body>
</html>
body{
margin:0;
padding:0;
background-color:rgba(0,0,0,0);/* Transparent background */
}
.white-circle{
width:100px;
height:100px;
background-color:white;
border-radius:50%;
display: flex;
align-items: center;
justify-content: center;
app-region: drag;
user-select: none;
}