前言
Firefox在Windows上面的亚克力材质效果馋哭了，在about:config里面简单改个布尔值就能实现，透明的标题栏加上模糊的背景很漂亮。然后linux上就没有这个效果，非常朴素，但还是能用点麻烦的方式在dke上弄一个。
顺便改一下窗口控制按钮，默认好像是Adwaita类似的样子，不太喜欢，所以分享两个其他样式的，一个deepin样式，一个Windows样式，看看喜欢哪个就改哪个。
当前环境:cachyos + KDE Plasma 6.7.1
预览
开启=方法
开启Firefox原生的标题栏
在工具栏设置里面关闭标题栏来使用Firefox原生的标题栏，因为这样模糊的区域多一些
开启和添加自定义CSS
在Firefox地址栏输入 about:config，搜索并开启：
toolkit.legacyUserProfileCustomizations.stylesheets→ 设为true
前往Firefox的profile目录（about:profiles里可以找到），在根目录的chrome文件夹下新建 userChrome.css 文件（如果没有的话）。将下面内容复制进userChrome.css里：
@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
/* Please write your custom CSS under this line*/
#main-window {
background: transparent !important;
margin: 0px;
}
#main-window body {
background: transparent !important;
}
html {
border-radius: 16px !important;
}
#nav-bar,
#browser,
#navigator-toolbox,
#TabsToolbar,
.browserStack,
#tabbrowser-tabbox,
#tabbrowser-tabpanels {
background: rgba(255, 255, 255, 0.8) !important;
}
/* 针对深色模式的适配 */
@media (prefers-color-scheme: dark) {
#nav-bar,
#browser,
#navigator-toolbox,
#TabsToolbar,
.browserStack,
#tabbrowser-tabbox,
#tabbrowser-tabpanels {
background: rgba(0, 0, 0, 0.8) !important; /* 深色模式下半透明黑色 */
}
}
/* ----- 各元素的独立微调 ----- */
.browserContainer {
outline: none !important;
background: transparent !important;
}
#nav-bar {
/* 导航栏 */
background: transparent !important;
}
@media (prefers-color-scheme: dark) {
#nav-bar {
background: transparent !important;
}
}
#statusBar {
background: transparent !important;
}
#TabsToolbar {
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* 书签栏背景透明 */
#PersonalToolbar {
background: transparent !important;
}
@media (prefers-color-scheme: dark) {
#PersonalToolbar {
background: transparent !important;
}
}
/* 导航工具箱底部阴影/分割线清除 */
#navigator-toolbox {
border-bottom: none !important;
}
#navigator-toolbox::after {
display: none !important;
}
/* 标签栏底部边框清除 */
#tabbrowser-tabs {
--tab-separator-color: transparent !important;
}
/* 分割线全量清除 */
#nav-bar { border-top: none !important; box-shadow: none !important; }
/* ===== 主区域圆角 ===== */
#tabbrowser-tabbox {
box-shadow: none !important;
border-radius: 10px !important;
}
/* 消除圆角处的白色直角 */
#tabbrowser-tabpanels,
#tabbrowser-tabpanels > hbox,
#tabbrowser-tabpanels > hbox > browser {
background: transparent !important;
border-radius: 10px !important;
overflow: clip !important;
}
}
0.8就是透明度，可以改成更透明的也行，然后顺便加上一点圆角好看。
这个做了后Firefox只是侧边栏、标题栏和书签栏等变成变透明效果，模糊还得下一步。
开启KDE的窗口模糊
使用 kwin-effects-glass 或 kwin-effects-better-blur-dx。安装完成后在 系统设置 → 窗口管理 → 桌面特效 里找到并开启它，打开 Apply effects to window decorations as well 选项。然后在Classes of windows to force blur里添加firefox即可。
这两个插件都有液态玻璃折射效果呢
这样就成功了！
Deepin样式的窗口控制按钮
在第一步同样的文件里面加上
.titlebar-button, .titlebar-button:hover, .titlebar-button:active {
-moz-appearance: none !important; appearance: none !important;
border: none !important; border-radius: 0 !important;
padding: 0 !important; margin: 0 !important; outline: none !important;
background-color: transparent !important;
background-repeat: no-repeat !important; background-position: center !important;
background-size: 15px 15px !important;
width: 46px !important; min-width: 46px !important; height: 100% !important;
transition: background-color 0.15s !important;
}
.titlebar-button > .toolbarbutton-icon { display: none !important; }
.titlebar-min { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+") !important; }
.titlebar-max { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+") !important; }
.titlebar-restore { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjMWExYTFhIi8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iIzFhMWExYSIvPjwvc3ZnPg==") !important; }
.titlebar-close { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iIzFhMWExYSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiMxYTFhMWEiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; }
@media (prefers-color-scheme: dark) {
.titlebar-min { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+") !important; }
.titlebar-max { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+") !important; }
.titlebar-restore { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjZmZmZmZmIi8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==") !important; }
.titlebar-close { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiNmZmZmZmYiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; }
}
.titlebar-min:hover { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjMDA5YWU3Ii8+PC9zdmc+") !important; background-color: rgba(0,0,0,0.1) !important; }
.titlebar-min:active { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjMDA5YWU3Ii8+PC9zdmc+") !important; background-color: rgba(0,0,0,0.2) !important; }
.titlebar-max:hover { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjMDA5YWU3Ii8+PC9zdmc+") !important; background-color: rgba(0,0,0,0.1) !important; }
.titlebar-max:active { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjMDA5YWU3Ii8+PC9zdmc+") !important; background-color: rgba(0,0,0,0.2) !important; }
.titlebar-restore:hover { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjMDA5YWU3Ii8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iIzAwOWFlNyIvPjwvc3ZnPg==") !important; background-color: rgba(0,0,0,0.1) !important; }
.titlebar-restore:active { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjMDA5YWU3Ii8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iIzAwOWFlNyIvPjwvc3ZnPg==") !important; background-color: rgba(0,0,0,0.2) !important; }
.titlebar-close:hover { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iI2ZmODAwMCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiNmZjgwMDAiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; background-color: rgba(0,0,0,0.1) !important; }
.titlebar-close:active { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iI2ZmODAwMCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiNmZjgwMDAiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; background-color: rgba(0,0,0,0.2) !important; }
@media (prefers-color-scheme: dark) {
.titlebar-min:hover,.titlebar-max:hover,.titlebar-restore:hover { background-color: rgba(255,255,255,0.1) !important; }
.titlebar-min:active,.titlebar-max:active,.titlebar-restore:active { background-color: rgba(255,255,255,0.2) !important; }
.titlebar-close:hover { background-color: rgba(255,255,255,0.1) !important; }
.titlebar-close:active { background-color: rgba(255,255,255,0.2) !important; }
}复制进去别忘了每行前都有一个缩进
Windows11样式的窗口控制按钮
.titlebar-button, .titlebar-button:hover, .titlebar-button:active {
-moz-appearance: none !important; appearance: none !important;
border: none !important; border-radius: 0 !important;
padding: 0 !important; margin: 0 !important; outline: none !important;
background-color: transparent !important;
background-repeat: no-repeat !important; background-position: center !important;
background-size: 15px 15px !important;
width: 46px !important; min-width: 46px !important; height: 100% !important;
transition: background-color 0.15s !important;
}
.titlebar-button > .toolbarbutton-icon { display: none !important; }
.titlebar-min { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+") !important; }
.titlebar-max { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+") !important; }
.titlebar-restore { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjMWExYTFhIi8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iIzFhMWExYSIvPjwvc3ZnPg==") !important; }
.titlebar-close { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iIzFhMWExYSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiMxYTFhMWEiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; }
@media (prefers-color-scheme: dark) {
.titlebar-min { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9IjE3MSIgeT0iNDYyIiB3aWR0aD0iNjgyIiBoZWlnaHQ9IjEwMCIgcng9IjUwIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+") !important; }
.titlebar-max { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik03NTAgODkwSDI3NGMtNzQgMC0xMzQtNjAtMTM0LTEzNFYyNjhjMC03NCA2MC0xMzQgMTM0LTEzNGg0NzZjNzQgMCAxMzQgNjAgMTM0IDEzNHY0ODhjMCA3NC02MCAxMzQtMTM0IDEzNHpNMjc0IDIxMGMtMzQgMC02NCAzMC02NCA2NHY0NzZjMCAzNCAzMCA2NCA2NCA2NGg0NzZjMzQgMCA2NC0zMCA2NC02NFYyNzRjMC0zNC0zMC02NC02NC02NEgyNzR6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+") !important; }
.titlebar-restore { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik02NDAuMjU2IDE3MC42NjdjNjQgMCAxNDEuMjY5IDM2LjEzOSAxODguMTYgODguMTkyIDM5LjY4IDQzLjk4OSA2Mi40MjEgMTA2Ljc1MiA2NS4wNjcgMTYwLjg1M2wwLjI5OSAxMC43NTJ2MjQxLjE1MmE0Mi42NjcgNDIuNjY3IDAgMCAxLTg1LjA3NyA0Ljk0OWwtMC4yNTYtNC45NDl2LTI0MS4xNTJjMC0zNi40MzctMTYuMTI4LTg0LjI2Ny00My4zOTItMTE0LjQ3NS0yOS4wMTMtMzIuMjEzLTc4LjM3OS01Ni41MzMtMTE2Ljc3OS01OS42NDhMNjQwLjI1NiAyNTZIMzg0YTQyLjY2NyA0Mi42NjcgMCAwIDEtNC45OTItODUuMDM1TDM4NCAxNzAuNjY3aDI1Ni4yNTZ6IiBmaWxsPSIjZmZmZmZmIi8+PHBhdGggZD0iTTYxOC42NjcgMjk4LjY2N2gtMjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMTcwLjY2NyA0NDh2Mjk4LjY2N0ExNDkuMzMzIDE0OS4zMzMgMCAwIDAgMzIwIDg5NmgyOTguNjY3YTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCAxNDkuMzMzLTE0OS4zMzNWNDQ4QTE0OS4zMzMgMTQ5LjMzMyAwIDAgMCA2MTguNjY3IDI5OC42Njd6bTAgODUuMzMzYTY0IDY0IDAgMCAxIDY0IDY0djI5OC42NjdhNjQgNjQgMCAwIDEtNjQgNjRIMzIwYTY0IDY0IDAgMCAxLTY0LTY0VjQ0OGE2NCA2NCAwIDAgMSA2NC02NGgyOTguNjY3eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==") !important; }
.titlebar-close { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHg9Ijg2IiB5PSI0NjkiIHdpZHRoPSI4NTIiIGhlaWdodD0iODYiIHJ4PSI0MyIgZmlsbD0iI2ZmZmZmZiIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTEyIDUxMikiLz48cmVjdCB4PSI4NiIgeT0iNDY5IiB3aWR0aD0iODUyIiBoZWlnaHQ9Ijg2IiByeD0iNDMiIGZpbGw9IiNmZmZmZmYiIHRyYW5zZm9ybT0icm90YXRlKC00NSA1MTIgNTEyKSIvPjwvc3ZnPg==") !important; }
}
/* ── hover/active：min/max/restore → 浅灰遮罩，图标不变色 ── */
.titlebar-min:hover, .titlebar-max:hover, .titlebar-restore:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
}
.titlebar-min:active, .titlebar-max:active, .titlebar-restore:active {
background-color: rgba(0, 0, 0, 0.12) !important;
}
/* ── hover/active：close → 红色遮罩 ── */
.titlebar-close:hover { background-color: #E81123 !important; }
.titlebar-close:active { background-color: #C42B1C !important; }
@media (prefers-color-scheme: dark) {
.titlebar-min:hover, .titlebar-max:hover, .titlebar-restore:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
.titlebar-min:active, .titlebar-max:active, .titlebar-restore:active {
background-color: rgba(255, 255, 255, 0.14) !important;
}
}后言
deepin和Windows样式的窗口控制器样式二选一，然后加上背景模糊，就能在kde上面实现Windows上面Firefox好看的亚克力效果了，垂直标签栏和水平下都适用。
niri，gnome等桌面环境应该也能实现，只是开启kde模糊那一步要用分别的方式了。
版权信息
- 文章作者: 天影大侠
- 文章链接: https://blog.skyshadow.fun/posts/43/
- 版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源本站