CSS3总结

1.CSS3 模块

CSS3语言开发是朝着模块化发展的，其中重要的CSS3模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

2.CSS3 边框

border-radius 圆角边框

div {
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
}

box-shadow 边框阴影

1	div {box-shadow: 10px 10px 5px #888888;}

border-image 边框图片

div{
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}

3.CSS3 背景

background-size

div {
    background:url(bg_flower.gif);
    -moz-background-size:63px 100px; /* 老版本的 Firefox */
    background-size:63px 100px;
    background-repeat:no-repeat;
}

background-origin
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div {
    background:url(bg_flower.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-origin:content-box; /* Safari */
    background-origin:content-box;
}

多背景图片
CSS3 允许您为元素使用多个背景图像。

1
2
3

body { 
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

4. CSS3 文本效果

text-shadow 文本阴影
1
h1 {text-shadow: 5px 5px 5px #FF0000;}
word-wrap 自动换行
1
p {word-wrap:break-word;}

5.CSS3 字体

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体，将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在CSS3 @font-face 规则中定义的。

<style> 
@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div {font-family:myFirstFont;}
</style>

在新的@font-face规则中,您必须首先定义字体的名称（比如myFirstFont），然后指向该字体文件。

6.CSS3 2D 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-，Internet Explorer 9 需要前缀 -ms-。
2D Transform 方法函数描述：

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

div {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);		/* IE 9 */
    -webkit-transform: rotate(30deg);	/* Safari and Chrome */
    -o-transform: rotate(30deg);		/* Opera */
    -moz-transform: rotate(30deg);		/* Firefox */
}

7.CSS3 3D 转换

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换。
2D Transform 方法：

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义3D转换，使用16个值的4x4矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图

div {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);	/* Firefox */
}

8.CSS3 过度

通过 CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
Internet Explorer10、Firefox、Chrome以及Opera支持transition属性。Safari需要前缀-webkit-。Internet Explorer9以及更早的版本，不支持transition属性。Chrome25以及更早的版本，需要前缀-webkit-。
示例：

div:hover {width:300px;}

div {
    transition: width 2s;
    -moz-transition: width 2s;	/* Firefox 4 */
    -webkit-transition: width 2s;	/* Safari 和 Chrome */
    -o-transition: width 2s;	/* Opera */
}

9.CSS3 动画

通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。
@keyframes规则用于创建动画。Internet Explorer 10、Firefox以及Opera支持@keyframes规则和animation属性。Chrome和Safari需要前缀-webkit-。Internet Explorer 9，以及更早的版本，不支持@keyframe规则或 animation属性。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

10.CSS3 多列

Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9以及更早的版本不支持多列属性。

column-count 属性规定元素应该被分隔的列数：

div {
    -moz-column-count:3; 	/* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
}

column-gap 属性规定列之间的间隔：

div {
    -moz-column-gap:40px;		/* Firefox */
    -webkit-column-gap:40px;	/* Safari 和 Chrome */
    column-gap:40px;
}

column-rule 属性设置列之间的宽度、样式和颜色规则。

div {
    -moz-column-rule:3px outset #ff0000;	/* Firefox */
    -webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

11.CSS3 用户界面

resize 属性规定是否可由用户调整元素尺寸
Firefox、Chrome 以及 Safari 支持 resize 属性。
1
2
3
4
div {
resize:both;
overflow:auto;
}
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
1
2
3
4
5
6
7
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
1
2
3
4
5
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

参考网页：
W3school-CSS3教程