透明electron窗口怎么添加阴影效果
时间: 2023-02-20 12:57:45 浏览: 71
要在透明 Electron 窗口中添加阴影效果,您可以使用 CSS 中的 `box-shadow` 属性。
首先,您需要为您的窗口元素(例如 `<body>`)定义一个样式。然后,使用 `box-shadow` 属性定义阴影的样式。
例如:
```
body {
box-shadow: 0px 0px 10px #888888;
}
```
这将为您的窗口添加一个水平和垂直偏移量为 0,模糊半径为 10 像素,颜色为 #888888 的阴影效果。
您可以根据需要调整偏移量、模糊半径和颜色,以实现更多不同的阴影效果。
相关问题
electron窗口透明后怎么把自己的窗口附上阴影效果
要在 Electron 窗口中添加阴影效果,可以使用 CSS。可以在应用程序的 HTML 文件中添加以下 CSS 代码:
```
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
```
其中,`box-shadow` 属性定义了阴影的外观,包括位置、大小、模糊程度和颜色。
如果要在 Electron 窗口中的特定元素上添加阴影效果,可以将上述 CSS 代码添加到该元素的样式中。
例如:
```
<div class="shadow-element">...</div>
<style>
.shadow-element {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
</style>
```
electron 无边框 加阴影效果
你可以使用`electron`的`BrowserWindow`对象的`frame`属性设置为`false`来去掉窗口边框,然后使用`CSS`为窗口添加阴影效果。具体的实现代码如下:
```javascript
const { BrowserWindow } = require('electron');
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 去掉窗口边框
webPreferences: {
nodeIntegration: true
}
});
win.webContents.on('did-finish-load', () => {
win.webContents.insertCSS(`
/* 添加阴影效果 */
body {
-webkit-app-region: drag;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
`);
});
win.loadFile('index.html');
```
这样,你的`electron`窗口就会没有边框并且有阴影效果了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)