上节在《再说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

今天为大家带来一个CSS3制作的网站后台管理面板的模板。主要运用到了CSS3新增加的target伪类结合opacity来制作Tab选项卡，以及fontface制作图标等，另外还通过这个- -input-placeholder伪类来统一placeholder内字体在各个浏览器下的样式，具体请看代码注释。

上回@格子同学使用div模仿了一个价格表格，外观优美，只是其中有一些内容和样式结合在一起，分离不够完美。今天她再次为大家制作了一个价格表格。这次案例中修正了上一回的内容与样式的结合问题，并且利用CSS3制作出完美的UI效果。其中最为有特色的就是CSS3渐变的运用。第一使用渐变制作了一个大背景，第二使用渐变制作了一个网格纹理效果，第三使用渐变制作了锯齿花边效果。在这三个效果中应数锯齿花边难做，如果你不知道如何制作这样的效果，不仿跟着这个案例往下看看。

制作一个表格容易，但是要设计一个表格，让它爽心悦目，对于前端攻城师来说可是一个挑战——我们不仅需要考虑表格的外观好看，而且要提高用户的体验，让用户方便阅读表格，方便从表格中找到自己需要的数据。早前参考Red Team的Red介绍的CSS3制作表格的教程——《Feature table design with CSS3》做了一定的讲解《CSS3美化表格》。今天我们换过一种思路，完全使用div来模仿表格，而且这个模仿出来的表格更具扩展，最大的特点是设计完美。

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

这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例（时间效果是由jQuery完成）。这个案例仿Mac电脑的窗口风格设计，整个面板分成三部分，顶部由标题和最小化、最大化以及关闭按钮组成（这三个按钮功能未添加）；中间部分类似于播放器一样，左边是播放的按钮（播放、中止和停止）三个组成，以及播放时间的计算（时间效果由jQuery完成）；最底下部分是整个时间的统计文本。整体效果清爽，设计层次清晰。当然大家关注的还是使用了什么技术，这里我们仅仅面板效果来说的话，并不复杂，只使用了CSS3的圆角、阴影、渐变和@font-face几个简单的属性，感兴趣的话继续往下看代码吧。

简约而又养眼的一个导航。

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

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