导航栏添加毛玻璃（blur）效果，增强页面层次感和现代感。通过 CSS backdrop-filter 属性和半透明背景的组合，可以让导航栏呈现出模糊磨砂效果，使内容在滚动时更加清晰可见，同时增添页面的现代设计感。

在theme/style文件夹，然后新建blur.css并填入如下代码

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ blur.css
│  └─ index.md
└─ node_modules

在主题原始文件中，VPNavBar.vue组件有其对应的属性

复制下面代码，粘贴到blur.css中，可以自行增减

/* .vitepress\theme\style\blur.css */
:root {

    /* 首页下滑后导航透明 */
    .VPNavBar:not(.has-sidebar):not(.home.top) {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* 搜索框透明 */
    .DocSearch-Button {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* Feature透明 */
    .VPFeature {
        border: 1px solid transparent;
        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
        background-color: transparent;
    }

    /* 文档页侧边栏顶部透明 */
    .curtain {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    @media (min-width: 960px) {

        /* 文档页导航中间透明 */
        .VPNavBar:not(.home.top) .content-body {
            background-color: rgba(255, 255, 255, 0);
            backdrop-filter: blur(10px);
        }
    }

    /* 移动端大纲栏透明 */
    .VPLocalNav {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

}

最后引入index.css 中即可看到效果

/* style/index.css */
@import './blur.css';