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;
}