Add -webkit- prefix to backdrop-filter, update README

This commit is contained in:
the1812 2018-08-05 14:17:33 +08:00
parent c00c83938b
commit c52f8e3fc8
4 changed files with 7 additions and 7 deletions

View File

@ -102,11 +102,11 @@
# 兼容性
## ![Chrome](https://img.shields.io/badge/Chrome-兼容-brightgreen.svg?style=flat-square&colorB=009688)
Chrome能够完美支持所有功能.
Chrome支持所有功能,其中触摸调整框的背景模糊效果(`backdrop-filter`)需要手动在[Flags](chrome://flags/#enable-experimental-web-platform-features)中开启.
## ![Firfox](https://img.shields.io/badge/FireFox-部分兼容-yellow.svg?style=flat-square&colorB=FF6F00)
滚动条样式无效,滤镜效果不仅无抗锯齿,还会使部分布局错位.
滚动条样式无效,滤镜效果不仅无抗锯齿,还会使部分布局错位,触摸调整框的背景模糊效果无效.
## ![Edge](https://img.shields.io/badge/Edge-部分兼容-yellow.svg?style=flat-square&colorB=FF6F00)
自定义颜色与滚动条样式无效,滤镜效果无抗锯齿,半透明颜色(`#rrggbbaa`)无效*,顶栏触摸体验不佳. 触摸功能需要手动在`about:flags`页面中开启.
自定义颜色与滚动条样式无效,滤镜效果无抗锯齿,半透明颜色(`#rrggbbaa`)无效*,顶栏触摸体验不佳. 触摸功能需要手动在[Flags](about:flags)中开启.
*Edge将考虑用rgba()实现半透明颜色.
## ![Safari](https://img.shields.io/badge/Safari-未知-lightgrey.svg?style=flat-square&colorB=323232)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -21,6 +21,7 @@
height: 50%;
background: rgba(0,0,0,0.625);
background: #000A;
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
position: relative;
}
@ -69,7 +70,6 @@
background: #3338;
padding: 0.5em;
margin-left: 1.3em;
border-radius: 4px;
margin-right: 0.2em;
max-width: 5em;
}