CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。这篇文章中，我收集了一组实用的 CSS3 技巧，能够帮助你美化您的网站，并给它一个更专业的外观和感觉。
黑白图像
下面的 CSS 代码能够把彩**像转变成黑白风格：
    img.desaturate {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }
页面顶部阴影
下面这个简单的 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;
    }
检测鼠标双击
不管您相信与否，使用 CSS 就能够检测出元素是否被双击：
HTML：
    <div class="test3">
      <span><input type="text" value=" " readonly="true" />
      <a href="http://www.baidu.com">Double click me</a></span>
    </div>
CSS：
    .test3 span {
      position: relative;
    }
    .test3 span a {
      position: relative;
      z-index: 2;
    }
    .test3 span a:hover, .test3 span a:active {
      z-index: 4;
    }
    .test3 span input {
      background: transparent;
      border: 0;
      cursor: pointer;
      position: absolute;
      top: -1px;
      left: 0;
      width: 101%;
      height: 301%;
      z-index: 3;
    }
    .test3 span input:focus {
      background: transparent;
      border: 0;
      z-index: 1;
    }
css实现三角形
这其实是一个古老的技巧，不需要用到 CSS3 新特性就能实现：
    div.arrow-up {
      width:0px;
      height:0px;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-bottom:5px solid #2f2f2f;
      font-size:0px;
      line-height:0px;
    }
    div.arrow-down {
      width:0px;
      height:0px;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-top:5px solid #2f2f2f;
      font-size:0px;
      line-height:0px;
    }
    div.arrow-left {
      width:0px;
      height:0px;
      border-bottom:5px solid transparent;
      border-top:5px solid transparent;
      border-right:5px solid #2f2f2f;
      font-size:0px;
      line-height:0px;
    }
div.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;
  border-top:5px solid transparent;
  border-left:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}