css炫酷标题,分享几个CSS小众但炫酷的技巧

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

复制代码代码如下:

img.desaturate {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

2.页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果：

复制代码代码如下:

body:before {

content: "";

position: fixed;

top: -10px;

left: 0;

width: 100%;

height: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

box-shadow: 0px 0px 10px rgba(0,0,0,.8);

z-index: 100;

}

3.所有一切都垂直居中

要将所有元素垂直居中，太简单了：

复制代码代码如下:

html, body {

height: 100%;

margin: 0;

}

body {