CSS3功能

圆角（Rounded Corner）

.box_round {
　　-moz-border-radius: 30px; /* FF1+ */
　　-webkit-border-radius: 30px; /* Saf3+, Chrome */
　　border-radius: 30px; /* Opera 10.5, IE 9 */
}

只要设好一个半径值就可以了。border-top-left-radius：左上角的弧度、border-top-right-radius：右上角的弧度、border-bottom-right-radius：右下角的弧度、border-bottom-left-radius：左下角的弧度

盒状阴影（Box Shadow）

.box_shadow {
　　-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */
　　-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */
　　box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */
　　filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
}

-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的，都有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
IE 6~8使用其独有的滤镜，需要设置三个参数：offX（X轴偏移值）、offY（Y轴偏移值）、Color（阴影颜色）。

边界图片

#borderimg { 
    -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */ 
    -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */ 
    border-image: url(border.png) 30 30 round; 
}

语法：border-image: source slice width outset repeat|initial|inherit
如果省略值，会设置其默认值initial 。

值	描述
border-image-source	边框图像的位置。
border-image-slice	剪裁位置。没有单位，默认就是像素(px)。支持百分比。
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

这里还有更具体的介绍：border-image.docx

background-image

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

可以给不同的图片设置多个不同的属性

#example1 { 
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
}

background-size

指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定像素或百分比大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。
重置背景图像：

div { 
    background:url(img_flwr.gif); 
    background-size:80px 60px;
    background-repeat:no-repeat; 
}

伸展背景图像完全填充内容区域：

div { 
    background:url(img_flwr.gif); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

background-origin

指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像

div { 
    background:url(img_flwr.gif);
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    background-origin:content-box; 
}

background-clip

背景剪裁属性是从指定位置开始绘制。

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background-clip: content-box; 
}

相关实例：background-clip.html

线性渐变（Linear Gradient）

.box_gradient {
　　background: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
　　background: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */
　　-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0'); /* IE8 */
}

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下(默认值)、left是从左到右，如果定义成left top，那就是从左上角到右下角，也可以使用角度deg。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
-webkit-gradient是webkit引擎对渐变的实现，一共有五个参数。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。也可以使用-webkit-linear-gradient和moz参数一样。 属性repeating-linear-gradient(red, yellow 10%, green 20%)表示重复的线性渐变。IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

径向渐变（Radial Gradient）

.box_gradient {
　　background: -moz-radial-gradient(top, #444444, #999999); /* FF3.6 */
　　background: -webkit-gradient(radial,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */
　　-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0'); /* IE8 */
}

颜色结点不均匀分布的径向渐变：radial-gradient(red 5%, green 15%, blue 60%)。
设置形状(circle 圆形，ellipse 椭圆形)：radial-gradient(circle, red, yellow, green)。其渐变范围既不是按照宽度来的，也不是按照高度来的，是按照最远边角距离作为渐变结束线的。算法： Math.sqrt(200*200 + 400*400) ≈ 223.6。指定渐变起始点：radial-gradient(circle at 50px 50px, yellow, red) 。如果希望渐变是和容器保持一致比例的椭圆，则circle可以省略。也可以使用百分比值。
定渐变终止点位置(closest-side：距离容器最近的边、farthest-side：距离容器最远的边、closest-corner：距离容器最近的角、farthest-corner：距离容器最远的角)：radial-gradient(closest-side circle at 50px 50px, yellow, red )。
repeating-radial-gradient() 函数用于重复径向渐变：repeating-radial-gradient(red, yellow 10%, green 15%)。
在不指定渐变类型以及位置的情况下，其渐变距离和位置是由容器的尺寸决定的。

文本阴影(Text shadow)

指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：text-shadow: 5px 5px 5px #FF0000;

文本溢出(Text overflow)

clip修剪文本、ellipsis显示省略符号来代表被修剪的文本、string使用给定的字符串来代表被修剪的文本：text-overflow: ellipsis;

换行(Word wrap)

word-wrap:break-word; normal：只在允许的断字点换行（浏览器保持默认处理）、break-word：在长单词或 URL 地址内部进行换行

单词拆分换行(Word break)

normal：使用浏览器默认的换行规则、break-all：允许在单词内换行、keep-all：只能在半角空格或连字符处换行

服务器端字体（font-face）

设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装，文字只能以普通字体显示。这时可以让用户的浏览器自行下载服务器端字体，然后就能呈现出设计者想要的效果。

@font-face {
　　font-family: 'MyFont';
　　src: url('myfont.eot'); /* IE6+ */
　　src: local('myfont.ttf'),
　　url('myfont.woff') format('woff'), /* FF3.6 */
　　url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */
}

第一行代码表示为这种字体起一个名称，可以随意设置，我这里用的是MyFont。
第二行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的。
后三行local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype。然后，使用的时候这样写就可以了。h2{ font-family: “MyFont”; }
需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的”同源政策”。另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。
可用属性值及描述可参考：font.docx

多列（column）

column-count 属性指定了需要分割的列数、column-gap 属性指定了列与列间的间隙、column-rule-style 属性指定了列与列间的边框样式 、column-rule-width 属性指定了两列的边框厚度、column-rule-color 属性指定了两列的边框颜色 、column-rule 属性是 column-rule-* 所有属性的简写 、 column-span指定 元素跨越所有列、column-width 属性指定了列的宽度

用户界面

resize属性指定一个元素是否应该由用户去调整大小、box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容、outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

多媒体查询

CSS2 多媒体类型
@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) { CSS 代码…; }
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
多媒体类型有：

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

透明（opacity）

.box_rgba {
　　background-color: #B4B490;
　　background:transparent;
　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
　　zoom: 1;
　　background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
}

第一行是设置对象的预备色，也就是不透明时的颜色。如果浏览器不支持透明，就将显示这个颜色。
2、3、4、5行是专门为IE写的，其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色（startColorstr）和终点色（endColorstr）。在单色透明的情况下，这两个值是相同的。需要注意的是，它们的取值是一个八位的十六进制值，前两位表示alpha通道值，00表示完全透明，FF表示完全不透明；后六位则是这个颜色的RGB值。
最后一行除了IE，其他浏览器几乎都支持rgba函数。它有四个参数，前三个为一种颜色的RGB值，第四个为透明度，这里设为0.6。

旋转（rotation）

.box_rotate {
　　-moz-transform: rotate(7.5deg); /* FF3.5+ */
　　-o-transform: rotate(7.5deg); /* Opera 10.5 */
　　-: rotate(7.5deg); /* Saf3.1+, Chrome */
　　filter: progid:webkit-transformDXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
　　-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}

除了IE以外，其他浏览器都是用rotate函数，实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度（degree）。IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数SizingMethod表示重绘方式，’auto expand’代表自动扩展到新的边界。
除了这个滤镜，IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1，2，3，0，分别表示顺时针选择90度、180度、270度和360度。
还有之前讲过的transition、animation、transform、选择器。