全站变灰CSS

body,.gray{
  -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
    filter: grayscale(100%);
   filter: gray;
}

图片变灰CSS

img {
 opacity: 0.8;
  -webkit-transition: all 0.3s ease-out;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 
    0 -1px 1px #8B4513, -1px 0 1px #8B4513;

在 Firefox, Chrome, Opera, Safari 中的效果：

看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。 几经尝试，终于找到可以让 Chrome 也一样表现犀利的办法。通过观察可以得知在无模糊的情况下，也就是文本描边效果，各浏览器里的表现是一致的。

<style type="text/css" media="screen">
  html,body {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>

.transparent{
  filter:alpha(opacity=60); /*支持 IE 浏览器*/
  -moz-opacity:0.60; /*支持 FireFox 浏览器*/
  pacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/
}

@font-face { font-family : name ; src : url( url ) ; sRules }

name : 　字体名称
url : 　使用绝对或相对地址指定OpenType字体
sRules : 　样式表定义

<style stype="text/css">
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot);
</style>

语法：FILTER: FlipV   
说明：垂直翻转对象内容。
使用代码：style="FILTER: FlipV"
语法：FILTER：FlipH   
说明：水平翻转对象内容。
使用代码：style="FILTER: FlipH"