CSS3的重要模块：
选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面
1、边框：圆角、盒阴影、边界图片
border-radius: 1px；设置边框的圆角为1px
box-shadow: 10px 10px 5px #CCC；设置x轴、y轴偏移量为10px，宽度为5px，颜色为#CCC的阴影
border-image的兼容写法：Internet Explorer 不支持 border-image 属性。
-webkit-border-image: url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image: url(border.png) 30 30 round; /* Opera */
border-image: url(border.png) 30 30 round;
2、背景图片
background: url(img_flwr.gif) right bottom no-repeat；
background-image：url(图片地址)；
background-position：
background-size：
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-origin: content-box | padding-box | border-box；
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip: content-box | padding-box | border-box；
background-clip背景剪裁属性是从指定位置开始绘制
background-repeat:no-repeat | repeat；
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
background-image: url(img_flwr.gif), url(paper.gif);
3、渐变（Gradients）
1）线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
线性渐变 - 从上到下（默认情况下）：
background-image: linear-gradient(#e66465, #9198e5);
background: linear-gradient(#e66465, #9198e5);
线性渐变 - 从左到右：
background-image: linear-gradient(to right, #e66465, #9198e5);
background: linear-gradient(to right, #e66465, #9198e5);
线性渐变 - 对角：
background-image: linear-gradient(to bottom right, #e66465, #9198e5);
background: linear-gradient(to bottom right, #e66465, #9198e5);
使用角度：角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
background-image: linear-gradient(angle, color-stop1, color-stop2);
background: linear-gradient(angle, color-stop1, color-stop2);
但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
使用多个颜色节点：
background-image: linear-gradient(red, yellow, green);
background: linear-gradient(red, yellow, green);
使用透明度（transparent）:颜色采用rgba(255,255,255,0.1)--最后一项是透明度。
重复的线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
2）径向渐变（Radial Gradients）- 由它们的中心定义
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
颜色节点均匀分布的径向渐变：background-image: radial-gradient(red, yellow, green);
径向渐变 - 颜色节点不均匀分布：background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状：background-image: radial-gradient(circle, red, yellow, green);
不同尺寸大小关键字的使用：
closest-side、farthest-side、closest-corner、farthest-corner
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
重复的径向渐变：
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
4、 文本效果
1）text-shadow：文本阴影
text-shadow: 5px 5px 5px #FF0000;
2）box-shadow：盒阴影
box-shadow: 10px 10px 5px #888888;
3）text-overflow：文本溢出属性指定应向用户如何显示溢出内容
(1) text-overflow:ellipsis；// 文本超出显示...
（1）单行文本溢出显示省略号
overflow：hidden；
white-space：nowrap；
text-overflow：ellipsis；
（2）多行文本溢出显示省略号
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; // 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp:2; // 限制在一个块元素显示的文本的行数
overflow:hidden;
text-overflow:ellipsis;
(2) text-overflow:clip； // 直接截断
4）word-wrap：换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。
允许长文本换行:word-wrap:break-word;
5）word-break：单词拆分换行
(1) word-break:keep-all; // 不拆分单词
(2) word-break:break-all; // 拆分单词
注意: word-break 属性不兼容 Opera.
5、字体
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
注意: Internet Explorer 9 只支持 .eot 格式的字体.
使用粗体文本：font-weight:bold;
@font-face规则定义：
6、2D 转换transform：CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
transform和transform-origin
注意： -webkit-, -ms- 或 -moz- 前缀
1）translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate(50px，100px) 是从左边元素移动50个像素，并从顶部移动100像素。
2）rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
rotate(30deg) 元素顺时针旋转30度。
3）scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
4）skew()：transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
5）matrix()：matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
7、3D 转换 transform
8、过渡transition
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
1）指定要添加效果的CSS属性
2）指定效果的持续时间。
注意： 如果未指定效果的持续时间。，transition将没有任何效果，因为默认值是0。
9、 动画 @keyframes
注意：-webkit-, -ms- 或 -moz- 前缀
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
1）规定动画的名称
2）规定动画的时长
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
