CSS 一些个人不常用属性总结

1. 滚动捕获

　　在元素中滚动不会在中间停止 一定会停在元素前方后或后方

　　　　- 需要在父元素中设置 scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]    eg:  scroll-snap-type: x mandatory;  即时在X轴开启强制捕获

　　　　  第一个参数为 设置坐标轴 第二个参数 选择 捕获模式 mandatory 强制捕获 proximity 推荐启用  个人感觉 proximity 效果更好一点

　　　　- 需要在子元素上设置 scroll-snap-align 如何获得捕获点

2. 全站置灰

　　一行代码全站置灰 用于一些特殊时期

　　　　- filter: grayscale(1) 置灰 

　　　　- filter: grayscale(0) 正常

3. 图片遮罩

　　用于做出遮罩效果

　　　　- mask-img:  url('xxx.png');

 4. 背景模糊

　　用于做出毛玻璃镜面模糊效果

　　　　- backdrop-filter: blur('10px')  配合背景颜色测试效果 background: rgba(255,255,255, .2);

5. 渲染顺序

　　paint-order: storke fill;  先描边 再渲染文字

6. 文字描边

　　-webkit-text-stroke: 20px red； 描边像素  描边颜色