css2 和 css3的区别

animation（基础动画）eg:  div

{

animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2s infinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinite alternate;

}

background-clip（规定背景的绘制区域）eg: div

{

background-color:yellow;
background-clip:content-box;


}

background-origin（

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。

比如，我们想要在边框上显示背景，我们可以使用background-origin帮我们实现（前提是边框要是透明的，不然它会覆盖住背景）

background-clip：border|padding|content

该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin：padding|border|content

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了

）

background-size（背景大小）

border-radius

 (圆角)eg:
向 div 元素添加圆角边框：

div
{
border:2px solid;
border-radius:25px;
}

border-image

 (边框图片)

box-decoration-break（{ box-decoration-break: sBreak }  可能的值 sBreak  一个字符串,用于指定以下值之一 slice 默认值。不会针对整个方框呈现 border 、 padding 、 box-...）

box-shadow（阴影）

box-sizing（

规定两个并排的带边框的框：

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}）

columns

 (
规定列的宽度和列数：

div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}

)

clear-after（清除浮动）

flex

 (
定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
border:1px solid blue;
}

)

font-stretch（

让所有的div元素的文本更宽：

div { font-stretch: expanded; }

）

font-size-adjust（

通过指定font-size-adjust属性，浏览器将调整字体大小，无论字体系列（"宋体"性质值0.58）：

div { font-size-adjust: 0.58; }

）

font-synthesis（

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则：

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

）

font-kerning（适用于在字体中以代码形式进行字符对间距调整p {

  font-kerning: none;

}）

font-variant-caps（设置小型大写字母的字体显示文本,）

hanging-punctuation（目前主流浏览器都不支持 hanging-punctuation 属性。

在 p 元素首行的开始边缘之外放置一个标点符号：

p
{ [code]hanging-punctuation:first;

}
[/code]

）

hyphens（设置如何对单词进行拆分,以改善段落的布局）

icon（css3实现Icon
UI图标）

image-resolution（规定图像的正确分辨率）

image-orientation（目前只有 Firefox26 支持这个让图片旋转的 css 属性）

line-break（

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

）

object-fit（

object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示：

img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }

）

object-position（

object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示：

img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }

）

opacity（透明度）

outline-offset（

规定边框边缘之外 15 像素处的轮廓：

div
{
border:2px solid black;
outline:2px solid red; [code]outline-offset:15px;

}
[/code]

）

overflow-wrap

 / 

word-wrap（

允许长单词换行到下一行：

p.test {word-wrap:break-word;}

）

backface-visibility（

隐藏被旋转的 div 元素的背面：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}

）

perspective（

设置元素被查看位置的视图：

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

）

perspective-origin（

设置 3D 元素的基点位置：

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}

）

pointer-events

 (
CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。

当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。代码如下：

<style>
.overlay {
pointer-events: none;
}
</style>

<div id="overlay" class="overlay"></div>

)

resize（重置）

tab-size（检索或设置对象中的制表符的长度。）

text-align-last（设置或检索对象中内容的水平对齐方式）

text-decoration-line（检索或设置对象中的文本装饰线条的位置。

text-decoration-skip（设置对象中的文本装饰线条的形状）

text-decoration-position（

text-decoration-color：<color>

<color>：指定颜色。
检索或设置对象中的文本装饰线条的颜色

text-decoration-style（

text-decoration-style：solid | double | dotted | dashed | wavy

默认值：solid

取值：

solid：实线double：双线dotted：点状线条dashed：虚线wavy：波浪线

说明：

检索或设置对象中的文本装饰线条的形状。

对应的脚本特性为textDecorationStyle。

）

text-emphasis

 (
目前主流浏览器都不支持 text-emphasis 属性。

text-emphasis 属性是简写属性，用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color。

)

text-justify（

齐行改变单词间的间隔：

div
{
text-align:justify; [code]text-justify:inter-word;

}
[/code]

）

text-overflow（文本溢出隐藏）

transform（

旋转 div 元素：

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

）

transform-style（

使被转换的子元素保留其 3D 转换：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
}

）

text-shadow（

基础的文本阴影效果：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

）

transition

 (
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

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

)

word-break（

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

）

word-spacing（

规定段落中的字间距是 25 像素：

p
{ [code]word-spacing:25px;

}
[/code]

）

writing-mode（设置文本的垂直显示）