CSS3实用程序页面布局美化提示

1.黑白图像此代码将使您的彩色照片显示为黑白照片。这很酷吗？ Img.desaturate {filter: grayscale（100％）; - webkit-filter: grayscale（100％）; - moz-filter: grayscale（100％）; - ms-filter: grayscale（100％）; - o-filter:灰度（100％）;

}

2.页面顶部下方的简单css3代码片段可以为页面添加一个漂亮的顶部阴影效果：在{content:''之前的主体:固定位置:顶部: -10px;左边: 0;宽度: 100％ ;高度: 10px; -webkit-box-shadow: 0px 0px 10px rgba（0,0,0，8）; - moz-box-shadow: 0px 0px 10px rgba（0,0,0，8）; box-阴影: 0px 0px 10px rgba（0,0,0，8）; z-index: 100;

}

3.一切都垂直居中，垂直居中所有元素，太简单了：html，body {height: 100％; margin: 0;} body {-webkit-align-items: center; -ms-flex-align: Center; align-items: center; display: -webkit-flex; display: flex;

}

注意：在IE11中要小心使用flexbox。

4.文本渐变文本渐变效果非常流行，可以使用CSS3轻松实现：h2 [data-text] {position: relative;} h2 [data-text]: {content: attr（data-text）; z -index: 10;颜色:＃e3e3e3;位置:绝对;顶部: 0;左: 0; -webkit-mask-image: -webkit-gradient（线性，左上，左下，来自（rgba（0,0， 0,0）），颜色停止（50％，rgba（0,0,0,1）），到（rgba（0,0,0,0）））;

}

5.禁用鼠标事件CSS3新的指针事件允许您禁用元素的鼠标事件。例如，如果设置了以下样式，则无法单击连接。disabled {pointer-events: none;

}

6.模糊文字简单但文字模糊效果非常漂亮，简洁美观！blur {color: transparent; text-shadow: 0 0 5px rgba（0,0,0,0.5）;}