如果你喜欢jQuery之家，那么你会发现这里有很多demo都使用了CSS3技术，你一定迫不及待的在你的页面上使用它们。但是你会发现有很多CSS3特性只被少数几个浏览器支持，你一定又会望而却步。现在我们要告诉你，有几个十分有用的CSS3特性是被所有最新版本的浏览器都支持的，你可以在你的网站上马上使用它们。
1、CSS Animations and Transitions
CSS animations现在被所有最新版的现代浏览器所支持，包括IE10以上的IE版本。有两种方式创建CSS animations。第一种方式非常简单，它是通过改变CSS的transition属性来实现动画效果。通过CSS transitions，你可以创建hover和mouse down效果，或者你可以通过javascript来切换样式来触发动画效果。
第二种动画方式有一点复杂，它是通过@keyframe规则来指定动画的帧，以帧的方式来执行动画。这种方式可以使你重复的执行动画而不需要用户交互或javascript来触发它。
如果你想了解更多关于CSS Animations的知识，我们建议你阅读Mozilla Developer Network (MDN) article。如果你关心浏览器兼容问题，可以查看 compatibility table。
2、Calculating Values With calc()
另一个有用的CSS3特性是calc()函数。它允许你在CSS中做简单的数学算术运算。你可以在任何需要长度和大小的地方使用它。更加神奇的是，它可以自由的混合不同的CSS单位，例如百分比和像素。它的出现使得许多布局技巧都成为了过去式。更为可喜的是，IE9也支持这个CSS3特性。
更多关于calc()函数的知识查看这里。浏览器兼容性查看compatibility table。
3、Advanced Selectors
以前你可能是通过ID来为某个元素设置CSS样式，这种做法可能会带来一些问题。CSS 2.1和CSS 3引入了一些强大的选择器，可以使你的版面更清洁和使你的样式表更完美。
它们被所有的最新版现代浏览器支持包括IE9。
更多关于Selectors的知识查看这里。浏览器兼容性查看哪些浏览器支持它们。
4、Generated Content and Counters
内容生成器（Generated Content）对于开发者来说是一个强大的工具，它们通过伪元素::before和::after来实现。这些特性使你能够使用更少的代码来实现相同的html布局效果。这在你需要实现阴影或其它需要spans和divs的视觉元素时特别有用。通过它你可以获得一个最小语义的html结构代码。
CSS3同样也允许伪元素操作计数器（counters），它能够通过CSS规则进行累加。它们也能够接收包含它们的父元素的属性。看下面的例子：
内容生成器被所有的现代浏览器支持，包括IE9。
5、Gradients
Gradients渐变属性能够让开发者不用借助图片而创建平滑过渡的颜色渐变效果。CSS gradients在retina displays（视网膜显示器）上同样有很好的效果，因为它们是动态生成的。它可以生成线性渐变和径向渐变。CSS渐变属性已经存在很长一段时间了，在过去的一段时间里，这个属性的语法有了一点小变化。这些变化使CSS渐变属性可以不使用厂商前缀而在各个浏览器上生效。
关于CSS渐变的详细文档请看这里，它的浏览器兼容性可以查看这里。
6、Webfonts
在以前，我们的网页字体只能局限于“网页安全字体”。现在我们可以很容易的使用像“Google Fonts”和“typekit”这些漂亮的字体。还可以使用一些像 fontawesome 的精美字体图标。它们都是通过@font-face规则，让你来定义字体的名称，源文件，然后你就可以在font/font-family里声明使用它们。
7、Box Sizing
对于CSS的初学者来说 box model 盒模型是最头痛的事情。标准化组织这样定制这些规则有他们的原因，但是因为有paddings和borders，使我们不能直观的看到元素的宽度和高度。现在，我们可以使用box-sizing规则来改变这种情况，你可以通过设置border-box来看看，它完全符合你的预期设置。
更多关于盒模型的知识请点击这里，浏览器兼容性请查看 compatibility table。
8、Border Images
border-image属性能够让使用自定义图案来显示元素的边框。边框包含一个单独的图像，与该图像对应的不同部分的每个区域的边界。
更多关于border-image的资料请查看 MDN page 和 CSS tricks 的这篇文章。border-image被所有现代浏览器和IE11支持。
9、Media Queries
Media Queries媒体查询技术是每一位前端开发者都必须掌握的。Media Queries出现已经有一段时间，它的出现改变了我们建立网站的方式。通过媒体查询，我们可以创建一个响应式的网站来适应所有不同屏幕的浏览器。
Media queries的使用方法非常简单，你只需要在CSS文件的最后写上需要的@media规则即可。你可以在这个页面缩小浏览器看看媒体查询的效果。
Media Queries媒体查询可以检测浏览器的分辨率和颜色深度，定位，像素密度和其它一些属性。更多关于媒体查询的资料查看这里，浏览器兼容可以查看compatibility table。
10、Multiple Backgrounds
通过Multiple Backgrounds（多重背景）技术，设计者可以制作出非常有趣的效果。它可以在同一个元素上设置不同的图像为背景。每一张图像（或者说是层）可以单独制作动画效果，所有的背景相关的CSS规则现在可以以逗号分隔的每一个指定的背景图像。查看下面的例子，用鼠标在图片上移动试试效果。
更多关于Multiple Backgrounds多重背景的知识请查看这里，所有的浏览器都支持多重背景技术，浏览器兼容性请查看这里。
11、CSS Columns
基于列的布局使用CSS是很难实现的。它通常是通过javascript或服务器端将内容分割在不同的元素中来实现。现在，我们可以通过CSS columns属性来实现它。
虽然仍然需要使用厂商的前缀，但是现在各个现代浏览器对CSS Columns的支持已经做得很好了。
12、CSS 3D Transforms
css 3d效果可以为你的网站锦上添花。看看下面的CSS 3D Transforms效果。
更多关于CSS 3D Transforms的知识请查看这里，浏览器兼容性请查看这里。
其他一些属性
还有一些属性是值得一提的。现在开始，你应该在使用border-radius和box-shadow是停止使用厂商的前缀。你可以使用data-uri属性来作为背景图像，它可以在所有浏览器中正常工作。opacity属性也同样被所有浏览器支持。