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

[sikuu2al]

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

[Track13]

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

[gchxp]

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

[tpphha]

确实有点意思。

[7gugu]

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

[justdoit123]

找这个元素 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 的毛玻璃

[justdoit123]

说真的，这玩意让我找可以找得到。

但是让我“创造”出来，我还真不会。 厉害～ 厉害～

[7gugu]

@justdoit123 #5 主要是没想到 background-size 可以这么玩，太屌了

[liuidetmks]

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

[chinieer20]

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

[sikuu2al]

感谢大家嗷

[iOCZS]

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

[cswnodgmail]

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

[sikuu2al]

@cswnodgmail 哈哈哈哈我也有这个想法

[cswnodgmail]

顺手问了 AI ，分享出来供友友们参考：
-----------
这段 CSS 代码在不同浏览器中的兼容性情况如下：

### 兼容性分析

1. **`position: relative;`**
- **兼容性**：广泛支持，几乎所有浏览器都支持相对定位。

2. **`border-bottom: 1px solid var(--border-color);`**
- **兼容性**：CSS 变量（自定义属性）在现代浏览器中得到支持，但在较旧的浏览器（如 IE 11 及更早版本）中不支持。
- **建议**：对于不支持 CSS 变量的浏览器，考虑使用常量值。

3. **`height: var(--header-height);`**
- **兼容性**：与 `--border-color` 相同，CSS 变量在现代浏览器中支持良好，但在 IE 11 及更早版本中不支持。

4. **`padding: 0 12px 0 24px;`**
- **兼容性**：标准的内边距属性，所有浏览器均支持。

5. **`background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);`**
- **兼容性**：径向渐变广泛支持，但 CSS 变量在 IE 11 中不支持。可以使用渐变的常量值替代。

6. **`background-size: 4px 4px;`**
- **兼容性**：所有现代浏览器均支持。

7. **`backdrop-filter: saturate(50%) blur(4px);`**
- **兼容性**：`backdrop-filter` 在 Safari 中完全支持，Chrome 和 Firefox 也支持，但在某些旧版浏览器中（包括 IE ）不支持。需要注意的是，某些浏览器可能需要启用实验性功能。

8. **`-webkit-backdrop-filter: saturate(50%) blur(4px);`**
- **兼容性**：这是 WebKit 前缀的实现，主要用于 Safari 和一些 Android 浏览器。现代 Chrome 和其他基于 Chromium 的浏览器也支持。

9. **`top: 0;`**
- **兼容性**：所有浏览器均支持。

### 总结

- **现代浏览器**（如 Chrome 、Firefox 、Safari 、Edge ）对大部分属性都有很好的支持，但 CSS 变量不被 IE 11 及更早版本支持。
- **渐变和背景滤镜**的支持情况较好，尤其是 `backdrop-filter`，在 Safari 中表现最佳。
- 如果需要支持 IE 11 或其他较旧的浏览器，建议使用常量值替代 CSS 变量，并考虑使用渐变的硬编码值。

### 解决方案

- **使用 Polyfills**：如果需要支持旧版浏览器，可以使用 Polyfill 来处理 CSS 变量。
- **提供降级方案**：为不支持 CSS 变量和渐变的浏览器提供简单的样式作为降级方案。
- **测试**：在主要目标浏览器中进行测试，以确保样式按预期工作。

[cswnodgmail]

@sikuu2al 方便围观嘛哈哈哈哈

[com781517552]

买个有 f12 的键盘吧

[sikuu2al]

@cswnodgmail 哈哈哈下一个项目才用

[ochatokori]

@iOCZS #11 那这么说全部换成白底黑字就行了，搞那么多 css 干什么🤣，华而不实

[iOCZS]

@ochatokori 那也没那么绝对，没上面那块，肯定没什么影响。但你要说都黑白了，那肯定有碍观瞻

[shintendo]

@iOCZS 有碍观瞻，但是不影响使用，所以也是华而不实