如何在Tauri应用中设置窗口边框圆角

以下是经过验证的几种实现方式，覆盖不同Tauri版本和平台场景：

方法1：基础配置+前端CSS实现（通用所有平台） #

这是最通用的方案，核心是关闭系统窗口装饰、开启透明，再用CSS设置圆角：

1. 修改tauri.conf.json的窗口配置：

"windows": [
  {
    "title": "你的应用名称",
    "width": 800,
    "height": 600,
    "decorations": false,
    "transparent": true
  }
]

• decorations: false：关闭系统自带的标题栏和边框
• transparent: true：让窗口背景透明，否则CSS圆角会被系统窗口背景覆盖

2. 在前端页面的CSS中设置圆角和拖动区域：

body {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background-color: #ffffff;
  overflow: hidden;
}

/* 顶部拖动区域，让用户可以拖动窗口 */
.title-bar {
  height: 32px;
  width: 100%;
  -webkit-app-region: drag;
}

• 注意要给根元素（body或容器）设置overflow: hidden，防止内容溢出圆角区域

方法2：Windows平台专属优化（解决黑边/圆角不生效） #

如果Windows上设置后出现黑边或圆角不显示，补充以下配置到tauri.conf.json的窗口项中：

"win32": {
  "transparentTitlebar": true,
  "extendBackgroundIntoTitlebar": true
}

该配置会让Windows系统的窗口背景完全透明，确保CSS圆角正常渲染。

方法3：Tauri 2.x 代码层面配置（更灵活） #

如果你使用Tauri 2.x，可以直接在Rust代码中配置窗口属性，无需修改tauri.conf.json：

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let window = app.create_window(
        "main",
        tauri::WindowUrl::App("/".into()),
        |builder| {
          builder
            .decorations(false)
            .transparent(true)
            .inner_size(800.0, 600.0)
        },
      )?;
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("运行Tauri应用出错");
}

前端CSS配置和方法1一致即可。

方法4：Linux平台兼容性处理 #

部分Linux窗口管理器（如GNOME）默认不支持透明窗口，需要额外操作：

• 安装gnome-tweaks，在「Windows」选项中开启「Allow transparent windows」
• 若仍有问题，在tauri.conf.json中添加Linux专属配置：

"linux": {
  "gtkThemeVariant": "light"
}

关键注意事项 #

• 必须同时关闭系统装饰和开启透明，二者缺一不可
• 透明窗口可能会小幅影响性能，低配置设备需测试
• 不同平台渲染逻辑有差异，务必在目标平台上验证效果

内容的提问来源于stack exchange，提问作者mvioole