苹果导航条的高斯模糊效果（css）

今天接到一个需求，实现一个高斯模糊半透明的效果，以前没有写过这种效果，今天实现了，做一个记录

这个是给出的设计稿

可以看到，在免费预约门店的位置，滑动下来的文案，是一个毛玻璃效果，底部的绿色是固定的

// 底部容器
.btn-bottom{
	width: 750rpx;
	height: 303rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(126, 194, 36, .8);
	backdrop-filter: brightness(200%) saturate(180%) blur(5px);
}

其实这样子就能实现毛玻璃的效果了，最主要的代码还是在backdrop-filter这个属性上

仔细看免费预约的部分，已经达到设计图的毛玻璃效果了（这个视频转换GIF的效果我也惊讶了）

这个时候，再复习一遍backdrop-filter的属性有那些

// 模糊的半径，数值越大越模糊
backdrop-filter: blur(2px); 

// 输出的亮度，越大越亮，比如 brightness(200%) => 输出亮度为2倍值
backdrop-filter: brightness(60%);

// 输出的对比度，越大越强烈
backdrop-filter: contrast(40%);

// 输出的阴影，类似css的box-show属性
backdrop-filter: drop-shadow(4px 4px 10px blue);

// 输出的灰度，0% => 100% 的效果类似于 黑白照 => 彩色照
backdrop-filter: grayscale(30%);

// 输出的色相变化
backdrop-filter: hue-rotate(120deg);

// 输出转换量（这个没怎么懂，估计以后用的不多）
backdrop-filter: invert(70%);

// 不透明度，但是会被子级继承，可能会影响到子级的不透明度
backdrop-filter: opacity(20%);

// 这个也是转换量
backdrop-filter: sepia(90%);

// 输出的饱和度
backdrop-filter: saturate(80%);