css的backdrop-filter简介：
https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter
backdrop-filter可实现毛玻璃(磨砂)的效果，但可能兼容性不好，尤其安卓移动端，
<style type="text/css">
body {
background-image: url('https://scpic.chinaz.net/files/pic/pic9/202102/apic30738.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
</style>
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
大致效果如下：
image.png
image.png
| 滤镜 | 含义 | 使用 |
|---|---|---|
| blur | 高斯模糊效果 | blur(2px); |
| brightness | 亮度：变图片的亮度，默认值为100%,即1 | brightness(2); |
| contrast | 对比度 ：取值和饱和度类似 | contrast(2.5); |
| drop-shadow | 投影：类似box-shadow，给图片加阴影 | drop-shadow(20px 20px 10px 20px #000) /水平阴影位置，垂直阴影位置，模糊距离，阴影颜色/ |
| grayscale | 灰度 ：取值在0-1之间 | grayscale(1) |
| hue-rotate | 色调变化：默认值为0deg，取值是角度（angle） | hue-rotate(90deg); |
| invert | 反向 ： 值为0-1之间的小数 | invert(1); |
| opacity | 透明度：值为0-1之间的小数，值越大透明度越低 | opacity(.3); |
| saturate | 饱和度 ：取值范围为数字即可，默认值1，即100% | saturate(5); |
| sepia | 褐色：取值也是0-1，类似于美图里的怀旧效果 | sepia(1) |
绘制简单三角形
<style type="text/css">
.triangle{
position: absolute;
width: 0;
height: 0;
border-right-color: #f0f;
overflow: hidden;
border: 20px solid transparent;
}
</style>
<i class="triangle"></i>
如下所示：
image.png
