1. 边框（圆角边框、加阴影和用图片绘制）
新增加 border-radius box-shadow border-image
.div1{
border:2px solid purple;
border-radius: 25px;
-moz-border-radius:25px;(火狐老版本)
width:600px;
height:300px;
box-shadow:10px 10px 5px #888888;
-webkit-border-image: url(border.png) 2 2 round;（chrome）
}
2.背景
新增加 background-size background-origin background-clip
.div1{
border:2px solid purple;
width:600px;
height:300px;
background:url(039.JPG);
background-size:100% 100%;
background-origin:content-box;（三种属性padding-box,content-box,border-box定位图片的相对位置）
background-clip:content-box;(三种属性padding-box,content-box,border-box规定背景的绘制区域)
}
3、阴影
可以分为box-shadow和text-shadow两类（即边框阴影和文字阴影）
#boxShadow{ border: 5px solid #111;
-webkit-box-shadow: 5px 5px 7px #999;
-webkit-border-bottom-right-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
.textShadowSingle {
font-size: 3.2em;
color: #F5F5F5;
text-shadow: 3px 3px 7px #111;
text-align: center;
}
4. 文本效果
新的文本属性：text-shadow word-wrap 等
p {word-wrap:break-word;} 允许长单词换到下一行
5. 字体
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
eg：
@font-face
{ font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot');
font-weight:bold; }
文件 "Sansation_Bold.ttf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。
6.CSS3透明度
由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
7.盒子模型
display:box;
box-flex:1;(子容器针对父容器的宽度或者高度划分)
eg：
< article class= “wrap” >
< section class="sectionOne" >01< /section >
< section class="sectionTwo" >02< /section>
< section class="sectionThree" >03< /section >
< /article >
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
.sectionTwo{
background:purple;
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
.sectionThree{
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
background:green;
}
box属性：box-orient | box-direction | box-align | box-pack | box-lines
详细参考：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/
8.浏览器兼容性
大 部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）。