有意思的CSS视觉效果

点阵效果：用于创建细小的点阵图案背景，可以为页面添加轻微的纹理效果。 背景装饰：适合作为较为轻量的背景装饰，尤其是在需要简单、干净的设计风格时 通过控制透明和白色的交替，可以为用户界面添加一种微妙的纹理感，而不会过于显眼或干扰内容的可读性

.nav-bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  width: 100%;
  height: 180px;
  background-image: radial-gradient(transparent 1px, #ffffff 1px); // 径向渐变，颜色从中心向外扩散 ,设置径向渐变的起始颜色为透明色，并且在 1 像素处结束透明部分, 设置在 1 像素的位置开始白色（#ffffff）的渐变。
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px); // 将背景的饱和度降低至 50%，同时应用 4px 的模糊效果
  z-index: 2;
}