CSS的功能我们目前也已经有所体会，也深感它的强大，在最新版本的CSS3中更是增添了很多新颖的功能，比如创建圆角，渐变和阴影，不借助其他的方式，在CSS中即可完成，这样加载的速度更快，而且编写起来也不是很复杂。
一 、浏览器兼容性、渐进增强和polyfill
1 、不同浏览器对于新的CSS属性的支持程度并不一致，编写网页的时候一定要注意，不要假设功能一定能用。
2 、渐进增强
之所以会一再地强调，还是因为不同的浏览器对于标准的支持程度不一样。所以你在开始写网页的时候，就要意识到：创建所有用户都能访问的基本层面的内容和功能，同时为更强大的浏览器提供增强的体验。这个理念带来的结果就是：编写语义良好的HTML，在此基础上，利用CSS增添优雅的样式。
2 、如果想弥合较弱浏览器和较强浏览器之间的功能差异，可以使用polyfill。polyfill通常是由JavaScript编写，对于旧的浏览器提供HTML5和CSS3的支持，但是这也会带来一定的负面影响，比如说降低浏览器的性能。http://html5please.com/ 这个网站还不错。
二 、为元素创建圆角（border-radius）
使用CSS，可以在不引入额外的标记或图像的情况下，为大多数元素创建圆角。
1 、为元素创建四个相同的圆角
输入：border-radius:r。r表示圆角的 半径大小，带单位，如像素。
有多种写法：
r有1个值——为四个角应用相同的半径
r有2个值——第一个表示左上方和右下方，第二个表示右上方和左下方
r有3个值——第一个表示左上，第二个表示右上和左下，第三个表示右下
r有4个值——第一个表示左上，顺时针往下依次
2 、为元素创建一个圆角
创建左上圆角：border-top-left-radius
创建右上圆角：border-top-right-radius
创建右下圆角：border-bottom-right-radius
创建左下圆角：border-bottom-left-radius
3 、创建椭圆形圆角
这个也很好理解：border-radius:x/y。x表示水平方向弯曲半径，y表示竖直方向弯曲半径。
4 、创建圆形
首先元素的宽和高要相等，其次只需要把r的值修改为宽或者高的一半即可。
注意：有的时候子元素的背景会透过圆角，这个时候只需要在元素的border-radius后面声明background-clip:padding-box。
三 、为文本添加阴影
text-shadow可以在不使用图像表示文本的情况下，为文本添加动态的阴影效果。
1 、为元素文本添加阴影
输入text-shadow，分别输入x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）、color（颜色），四个值之间用空格隔开，其中模糊半径可以省略，默认为0，水平和垂直偏移量可以为负值。
2 、为元素的文本添加多重阴影
在上一步的基础上，此时输入一个逗号，就可以重复上一步的行为。
3 、将text-shadow改回默认值
text-shadow:none。
注意：该属性是继承的。
四 、为其他元素添加阴影
使用text-shadow属性可以为元素的文本添加阴影，而box-shadow属性可以为元素本身添加阴影，在text-shadow的基础上，box-shadow多了inset关键字属性和spread属性（用于扩张和收缩）。
输入box-shadow，分别输入x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）、可选的inset关键字、可选的带长度的spread值和color（颜色）
1 、为元素添加阴影
输入box-shadow，再输入表示x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）、spread值和color（颜色），如box-shadow:2px 2px 3px 5px #333。
2 、创建内阴影
输入box-shadow，再输入表示x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）、spread值和color（颜色），此时再输入inset关键字，如box-shadow:2px 2px 3px 5px #333 inset。
3 、应用多重阴影和改回默认值与text-shadow一样。
注意：与text-shaow不同，box-shadow是不继承的。
五 、应用多重背景
CSS3支持为HTML元素添加多个背景。
div{ background-color:navy; //备用 background: url(…) no-repeat 50% 102%, url(…) no-repeat 100% -150px, url(…) no-repeat 0 50%, …………. } |
自我感觉这个不是很常用，不过语法形式比较简单，很容易掌握！
六 、使用渐变背景
渐变背景是CSS3的新特性，可以在不使用图像的情况下创建一种从一种颜色到另一种颜色的过渡。很新颖，效果也很好！
使用CSS创建渐变有两种主要的方式：线性渐变和径向渐变，每种方式都有不同的必选参数和可选参数，除非指定一种颜色向另一种颜色的过渡，否则浏览器会自行决定不同颜色之间的过渡。
根据渐进增强的原则，最好为不支持背景渐变的浏览器提供一个备用选项，在CSS中可以放在背景渐变规则的前面。
1 、创建备用背景颜色
输入background-color:color，作为备用的，对于不支持背景渐变浏览器的选择
2 、定义线性渐变
A 、输入background:linear-gradient(
B 、输入方向：可以是to top，to right，也可以是to top left等默认是to bottom，也就是从上往下，或者也可以是角度，如90deg（数值代表圆周上点的位置，0代表最顶端，90代表最左边，顺时针依次，0deg等价于to top），方向输入号之后输入一个逗号
C 、指定颜色，这里的颜色至少要有两个值，分别表示开始和结束，输入);，结束
background: linear-gradient(to right, red ,white); |
3 、定义径向渐变
A 、输入background:radial-gradient(
B 、指定渐变的形状，可以根据第三步的尺寸自行确定，也可以输入circle或者ellipse。
C 、指定渐变的尺寸，输入size，可以是一个（同时代表宽度和高度）或者两个值（分别代表宽度和高度），单位可以是像素也可以是百分数，一个值的时候不可以是百分数。
D 、指定渐变的位置，默认从中心开始，可以是线性渐变第二步的关键字，也可以是渐变中心位置的坐标，以at开头，如at 200px 43px
E 、指定颜色，这里的颜色至少要有两个值，分别表示开始和结束，输入);，结束
background: radial-gradient(20px at 50% 50%, red ,white); |
七 、为元素设置不透明度
使用opacity属性可以修改元素的透明度，用法是这样的：输入opacity:o，o为表示不透明度的两位小数，不带单位。
注意：opacity与RGBA里的alpha属性不同，opacity影响的是整个元素，而background-color:rgba(128,0,64,.6)仅影响背景的透明度。
八 、生成内容的效果
使用:before和:after伪元素可以很方便的为页面添加一些令人难以置信的设计效果，它们可以与content属性结合使用，从而创建所谓的生成内容。这里的生成内容是通过CSS创建的，这似乎扰乱了HTML，其实不然，这里的生成内容往往并不是语义的，而是一些符号或者样式。
利用:before和:after伪元素可以生成很多，例如三角形的样式，诸如此类，功能强大，可以看这里
http://www.cssarrowplease.com/
http://tympanus.net/Development/IconHoverEffects/
总结：不得不说，CSS3真的很强大，可以不借助图像，就实现花样多姿的效果，当然这些就不仅是理解规则那么容易了。目前需要的是，参考别人的范例，理解，总结出自己的东西。工具强大，也要会用才行！