上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法（称得上是W3C的标准语法）相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。以及在本文结束尾处一起探讨了一下如何让低版本兼容CSS3的渐变，以及一些兼容方案。不过在下更愿意希望大家放弃兼容性，大敢的去尝试使用，学习使用。如果实在需要使用到项目中，如果用户实在需要兼容性一致，可以在换思路，但对于学习来说，无需顾虑是否兼容。

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来，Web设计师都是通过图形软件设计这些渐变效果，然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，与设计并无任何差异。

事实上这种方法是比较麻烦的，因为首先需要设计师进行设计，然后进行切图，在通过样式应用到页面中。另外，在实际应用中可扩展性差，还直接影响页面性能。

值得庆幸的是，W3C组织将渐变设计收入到CSS3标准中，让广大的前端设计师直接受益，可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容，甚至烦人的IE，在IE10版本也支持了这个属性。

Web页面的布局，我们常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等，在众多布局方法中，大家最为熟悉的就是浮动布局和网格布局，并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果，但在实际中还是存在不少的问题，比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的，更理想的布局方法？这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用Flexbox：新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。既然有方案能让Flexbox布局模块在众多浏览器下实现兼容，那我们今天要说什么呢？从浏览器的兼容性中可以看出，Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1，Firefox22+、IE11+都得到了支持，但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话，还未进来主题，真有点对不住读者，接下来也不浪费大家宝贵时间，我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为Flex）。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性。根据Chris Coyier的《A Complete Guide to Flexbox》所译,再次向大家系统介绍了Flexbox模块中的各个术语，以及属性、属性参数所起的作用，并附上几个简单的实例与大家理论与实战相结合，实打实的了解清楚Flexbo模块。

使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体，这样一来就有很多同学在问，如何制作自己需要的字体呢？或者说如何将自己需要的图标转换成自己需要字体，在运用到web页面中？这个问题问得很好，其实实现思路并不复杂，我们需要通过一些适量图的软件，绘制出矢量图标，然后通过一定的工具将这些图标转换成需要的字体。或许你会说，这不是废话，还是没有谈到怎么做出来。大家不用着急，根据Martin Gittins的《How to turn your icons into a web font》文章介绍，你只需要一款制作矢量图的应用软件，和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信，不仿往下看，我想你看后，以后再也不会使用位图了。（^_^）

CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分，其一是“@media”规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；其二是“@supports”规则，主要用来代替前面常用的Modernizr库，在不支持CSS3的浏览器下实现渐进增强式设计。换句话来说，@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式，看起来很强大，那具体如何使用呢？我们今天一起简单的来学习一下。

Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考。

居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案，比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案，而在《CSS制作图片水平垂直居中》一文介绍了四种实现图片垂直居中的方案，并且在《CSS3实现水平垂直居中》使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太烦了，也有人使用jQuery的方法实现水平垂直居中效果，比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介绍的。今天我在这篇文章中向大家介绍实现水平居中的六种不同方法，希望对大家有所帮助。

此处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如说在您的代码中应不应该使用hack？甚至延伸到使用“hack”是一个优秀的前端人员？其实，有时候是逼不得以，必须为之。