• 在 element 页面滚动时，顶部 menu 栏遮住字体时会变成像素点 想问下这是咋实现的勒 还挺有意思的- 随便贴一个[ 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 的毛玻璃

说真的，这玩意让我找可以找得到。 但是让我“创造”出来，我还真不会。 厉害～ 厉害～

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

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

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

感谢大家嗷

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

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

哈哈哈哈我也有这个想法

顺手问了 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 变量和渐变的浏览器提供简单的样式作为降级方案。- 测试：在主要目标浏览器中进行测试，以确保样式按预期工作。

方便围观嘛哈哈哈哈

买个有 f12 的键盘吧

哈哈哈下一个项目才用

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

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

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

"买个有 f12 的键盘吧"回复这个的什么心态？