如果你用 CSS ，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用 CSS3 的 Transform ，可以很优雅的解决这个困惑：
.verticalcenter {
position: relative;
top: 50%;
-webkit-transform: translateY(- 50%);
-o-transform: translateY(- 50%);
transform: translateY(- 50%);
}
使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对 Transform 的支持是需要关注的，
Chrome 4 , Opera 10 , Safari 3 , Firefox 3 , and Internet Explorer 9 均支持该属性
在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，
我们需要伸展顶层元素： html 和 body :
html,
body {
height: 100%;
}
然后将 100% 应用到任何元素的高
div {
height: 100%;
}
3、基于文件格式使用不同的样式
为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：
a [href^="http://"] {
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a [href^="mailto:"] {
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a [href$=".pdf"] {
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
效果演示
4、创建跨浏览器的图像灰度灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：
svg xmlns= "http://HdhCmsTestw3.org/2000/svg">
filter id= "grayscale">
feColorMatrix type= "matrix" values= "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
filter>
svg>
为了跨浏览器，会用到 filter 属性：
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale( 1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
5、背景渐变动画
CSS 中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
button {
background-image: linear-gradient( #5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button: hover {
background-position: 0 0;
}
效果演示：
6、CSS：表格列宽自适用对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给 td 元素添加 white-space: nowrap; 能让文本正确的换行
td {
white-space: nowrap;
}
演示
7、只在一边或两边显示盒子阴影如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位 :after 伪类。实现底边阴影的代码如下
.box-shadow {
background-color: #FF8020;
width: 160px;
height: 90px;
margin-top: - 45px;
margin-left: - 80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow: after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: - 75px;
display: block;
position: absolute;
left: 50%;
z-index: - 1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
演示
8、包裹长文本如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。