学习css3新特性，简单有用的案例

1.@font-size
客户端写法

这是客户端字体写法

服务器端写法
多个值时用逗号隔开

@font-size{font-family: BorderWeb;src:url(BORDERW0.eot);}
 .p{font-size: 12px;font-family:"BorderWeb",'黑体','宋体'; }
能是一份完整的文档，也可能是一个chunk，

2.word-wrap属性

  
加入了“word-wrap: break-word”，设置或检索当前行超过指定容器的边界时是否断开转行，文字此时已被断开。
 

word-spacing 字与字之间的间距

word-spacing:30px;

3.text-overflow 对象内文本溢出时显示省略标记

.ellipsis{overflow: hidden;  text-overflow:ellipsis; white-space: nowrap;width:200px;}
当对象内文本溢出时显示省略标记

4.text-decoration 文字渲染
white-space 属性指定元素内的空白怎样处理。

.div{overflow: hidden;  
     text-overflow:ellipsis;  
     white-space: nowrap;  
     -webkit-text-fill-color:black; 
     -webkit-text-stroke-color:red; 
     -webkit-text-stroke-width:1px; 
     font-size: 30px;
  width:300px;

     }


 浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建

5.多列布局

.div3{
     -webkit-column-count:3;
     -webkit-column-rule:1px solid #ccc;
     -webkit-column-rap:10px;
 }

 浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据
 
html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建（Javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），
但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。至于javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。

6.border-radius:5px; 圆角
7.text-shadow 文字阴影
text-shadow:x轴方向阴影 y轴方向阴影 阴影模糊程度 阴影模糊颜色
8.box-shadow 边框阴影 （和文字阴影参数一样,x轴和y轴为0的时候，四周都有阴影）

9.reflect 反射效果

.p{
 font-size: 20px;
 font-family:"BorderWeb";
 text-shadow:5px 5px 2px rgba(64,64,64,.5); 
 -webkit-box-reflect:below 10px; 
  -webkit-gradient(linear, left top, left bottom, from(transparent), 
      to(rgba(255, 255, 255, 0.51)));  
    }
.div{   
 box-shadow: 2px 2px 2px rgba(64,64,64,.3);
 width:200px;
 height:200px;
 border-radius:5px;
     }

    
能是一份完整的文档，也可能是一个chunk，

10.gradient 渐变效果 linear