现在就能投入使用的12个高端大气上档次的CSS3特性
原文：http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/
原文中有demo展示及下载。
翻译开始：
可能你和我一样，每当看到一个新潮的令人过目不忘的css3特效，就迫不及待的想要应用到自己的网站中去。然后，你就会发现这些新特性只能在一到两个主流浏览器（而且绝不可能是IE）中正常显示，于是乎，你选择了搁置这个特效，开始遥遥无期的等待。现在我有一个好消息要告诉你：在最新版本的浏览器中，不少帅气的CSS3特性已经得到了良好的支持，你现在就可以使用它们了！
提醒下，下面所叙及的大部分特性不能在老版本的IE（9及之前的版本）中使用。如果你的客户中大部分仍在使用这些古董级浏览器，恐怕你还要降级使用那些久经考验的特性。但对其他人来说，尽情享受现代浏览器带给我们的美好吧~
1. CSS动画（Animations）和过渡（Transitions）终于能在所有主流浏览器中使用CSS动画了，甚至在IE（IE10）中也ok。创建CSS动画主要有两种方式。
第一种很简单，通过在CSS中设定transition属性。你可以使用transition创建鼠标悬停（hover）或点击（mouse down）特效，当然，你也可以通过JavaScript操纵DOM元素CSS的transition属性来触发动画。示例1中，当鼠标悬停时，火箭会过渡至贴近地球表面飞行。
第二种定义动画的方式就略显复杂了，这需要使用@keyframe来定义关键帧。这种方式允许你不用依靠用户操作或JavaScript就能触发一段重复的动画。
【具体代码及演示见源网页，下同。】
CSS动画值得好好学一学，这篇文章很适合用来入门。你也可以查阅各浏览器兼容性。
2.使用calc()来进行计算calc()函数算是另一个略显彪悍的CSS特性。它允许你在CSS中进行数学计算，适合于任何长度和大小需要经计算得出的场景。更酷的是，你可以在计算中自由的使用各种计量单位，比如百分号和像素【width: calc(100% - 40px);】。你再也不用使用那些hack了，而且有消息指出，这个函数在IE9+中运行良好，而且还不需要前缀哦亲。你可以在这里学习calc()函数，或者查看兼容性。3.高级选择器如果你还坚持仅仅为了添加样式表而给DOM元素分配ID的话，那你就out啦。CSS 2.1和CSS 3引入了大量强大的选择器使你可以更便捷的控制布局，更优雅的调整样式。
你可以在这里学习更多选择器其相关内容，或者查看兼容性。
4.生成内容和计数器::before和::after伪元素是web开发者手中强大的法宝。这个特性使得我们可以使用更少的代码来达到同样的布局需求，尤其适用于需要添加像阴影这类额外的可视化元素或者需要前导或后置的span和div等元素的情形。使用伪元素之后，你会获得一段更加精简且语义性更强的HTML代码。CSS3还提供了counters，这使得我们可以通过使用CSS规则来实现计数自增。而且，被包裹的元素也能从它们的父元素中访问counter。适用于包括IE9+之内的各主流浏览器。5.渐变CSS3的渐变属性使得web设计人员不用再依靠图片来获得颜色间平滑的过渡效果。CSS渐变的一大好处是在视网膜屏幕上依然表现出色，因为这是经计算得出的，而不是由像素构成的。渐变分为线性渐变和径向渐变两种，而且可以设置重复。在过去，渐变的适用范围较小，不过在之前的几个月小幅度修改了语法之后，它们几乎可以被应用到任何一个地方。
你可以在这里获得相关教程，或者查看各浏览器支持情况。
6.字体你还记得吗，那些只能使用“网络安全”字体的岁月？往事不堪回首，现如今，我们有Google Fonts和typekit使得我们能在样式表中嵌入优美的字体。我们还可以使用fontawesome这类可以创建矢量图标的图标字体来替代字母或数字。这都是拜@font-face所赐，通过该规则，你可以定义使用字体的名字，加粗倾斜等变体以及源文件，而这些定义你可以再之后的font/font-family声明中使用。
