CSS毛玻璃效果

先放源码:

.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

另外有两点需要注意:
1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。

解决UC浏览器、微信浏览器使用display:flex;的兼容性问题

在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。

使用display: flex;的时候需要加上display: -webkit-box;

使用flex: 1;的时候要加上:

-webkit-box-flex: 1;      
-moz-box-flex: 1;         
-ms-flex: 1;  

使用align-items: center;的时候需要加上:-webkit-box-align: center;

使用flex-direction: column;的时候需要加上:

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

这里有个demo大家可以看一下
请点击:测试页面

 

转载自:http://www.sheng00.com/2148.html

移动端的一个小bug

div ~ div 这个选择器在ios的QQ和UC等一堆浏览器中有点问题 不能相应动态改变类名的样式变更

比如:

div{height:100px;width:100px}
.div1.show ~ .div2{background-color:red}
.div2{background-color:blue}

window.addEventListener(‘tap’,function(){
document.querySelector(‘.div1’).classList.toggle(‘show’);
})