现在就能投入使用的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声明中使用。

出于安全的考虑，我没在上面这个编辑器【作者在原网页中提供了每个示例代码的编辑器】中嵌入本地字体，所以使用了Google Webfonts。你将在这个页面看到一个嵌入本地字体的例子。

在一些仁人志士的不断努力下，经过一些处理，webfonts也能够在古老的IE6中运行。上面提到的两个字体服务提供商会帮你处理好这一切，所以，你解放了【妹啊，中文呢。。。】。

7.Box-sizing

最让CSS初学者头疼的莫过于CSS的盒模型了。虽说标准化组织可能有他们的理由，不过定义元素的宽高还要刨除内边距和边框的宽度，就有些不合情合理了。这个有点定义失误的特性很擅长给我们制造麻烦。不过终于，我们有了box-sizing，这使得你可以根据直觉，按照你所想象的那样来定义元素的宽和高。

 

你可以在这里学习更多和box-sizing相关的内容，或者查看浏览器兼容性。

8.图片边框

border-image属性使得你可以用图片来设计边框。边框可以放在一个单一的图片中（CSS sprite技术），在边框的四个角及上下左右可以分别使用这张图片的不同部分。

使用的图片：

效果图：

 

你可以在MDN页面和CSS-tricks的这篇文章学习到图片边框的更多知识，border-image属性在全部主流浏览器和IE11中得到支持。

9.媒介查询

如果你以严谨的态度对待web设计，那你一定会使用媒介查询。鉴于它改变了我们建设网站的方式，虽然它已经有一段历史了，但仍然值得我们拿出来好好讨论一下。过去，我们一般设计一个适合PC分辨率的网站和一个单独为手机屏幕用户设计的网站。现在，使用响应式布局，一个网站便可适用于各种类型的设备、方向以及分辨率。

媒介查询出奇的易于使用，你所需要做的只是将一套CSS定位规则置于用@media注释的代码块中。每一个@media块都会在它的判断条件成立时启用。你可以试着打开这个页面，更改浏览器窗口大小来查看效果。

媒介查询能够检测设备分辨率、方向、色深、像素密度（PPI/PPCM）等属性。想要进行深度阅读的朋友看这里，以及浏览器兼容性。

10.多背景

使用多背景后，设计师们可以创造很多有意思的特效。我们可以为同一个元素设置不同的背景，每一张背景图片（更形象的说是图层）可以自由而独立的移动或动画。以前我们所使用的那些和background相关的CSS规则，现在可以通过一个逗号分隔的列表来设定不同的背景图片。

这里可以看到更多和多背景向相关的信息，浏览器兼容性也很不错。

11.分栏

众所周知，很难通过CSS实现基于列的布局。过去我们的做法是通过JavaScript或服务器端的处理将内容分割至不同的元素中，这种不必要的复杂使得先期开发偏离我们内容和样式分离的本意。幸好，在CSS3中我们可以用columns规则。

这个规则在各浏览器中得到了不错的支持，尽管仍需要前缀。其他和列相关的CSS属性以及浏览器差异可能会破坏分栏效果。

12.3D变换

在没有什么比一个3D特效更拉风，更让人印象深刻了。尽管对于3D变换特效的功效还存在着一些争议，但这并不妨碍一个设计良好的3D CSS特效吸引用户的眼球。

这里有一个仿苹果界面的登录窗，推荐阅读。如果你想仔细学习一下3D CSS，可以看看这篇详细介绍。如果不是面向IE用户，3D CSS的浏览器兼容性还是不错的。

其他

还有很多值得一提的著名特性：你现在可以停止使用border-radius和box-shadow的前缀了；你也可以在各浏览器中使用data-uri作为背景图片了；opacity也得到了广泛的支持，还有非常有用的background-size。

对于flexbox，@supports，滤镜，css遮罩等特性的跨浏览器原生支持，可能需要我们等一等了。但我觉得，等待是值得的！