elementui文档导航栏特效 像素化 模糊

就是这样的效果

主要使用的以下几个css样式

/*设置背景径向渐变色,中间透明,周边为白色*/
background-image:radial-gradient(transparent 1px,#fff 1px);
/*设置背景尺寸*/
background-size: 4px 4px;
/*设置背景滤镜的饱和度和模糊程度,可以看看这个https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter*/
backdrop-filter: saturate(50%) blur(4px);

下面写一个见得demo来测试吧

在线demo如下

​​https://codepen.io/xiguapi/full/gOeKwPM​​

<div class="nav">
  <span>
    我是导航栏
  </span>
</div>
<div class="content">
  我是内容
  <div class="bluebox"></div>
</div>

.nav{
  position:fixed;
  top:0px;
  height:100px;
  background-image:radial-gradient(transparent 1px, #fff 1px);
  background-size:4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
}
span{
  display:block;
  padding:10px;
  background-color:white;
  border-radius:10px;
  margin-left:10px;
  box-shadow:0 0 5px pink;
  margin-top:10px;
}
.content{
  height:1000px;
  margin-top:200px;
}
.bluebox{
  width:80px;
  height:80px;
  background-color:blue;
}