Element 主页的这个是咋实现的勒

- 在 element 页面滚动时，顶部 menu 栏遮住字体时会变成像素点 想问下这是咋实现的勒 还挺有意思的
- 随便贴一个[https://element-plus.org/zh-CN/guide/namespace.html#%E8%AE%BE%E7%BD%AE-elconfigprovider]

```css
.navbar-wrapper{
    background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
}
```
买个有 f12 的键盘吧

f12 了一下应该是.navbar-wrapper 下面的几个背景属性实现的

确实有点意思。

看起来是用了 CSS 的新属性，看起来好酷

找这个元素  header > .navbar-wrapper 有相关的样式：

.navbar-wrapper {
    position: relative;
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    padding: 0 12px 0 24px;
    background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    top: 0
}

最主要的有三个：
1. background-image 的 径向渐变
2. background-size 限制单元的大小
3. backdrop-filter 的毛玻璃

css 总有你意想不到的使用方式。

background-image:radial-gradient(transparent 1px, var(--bg-color) 1px) 这样式使得在背景上形成许多透明色（ 穿透到覆盖的 dom 的颜色）和背景色交替的点，确实有点意思。

技术层面是不错的，实际用途么，华而不实

markdown 了，下一个私人的小项目就用