CSS3----新增特性及其在主流浏览器中的兼容性

1. 选择器：IE6.0及以下不兼容，其它主流浏览器都兼容

     新增的属性选择器：

    [att^='value'] ：属性 att 的值以指定值value开始
    [att$='value']：属性 att 的值以指定值value结束
    [att*='value']：属性 att 的值包含指定值value，而无论其位置

     新引入连字符的兄弟选择器：

        如：div ~ img{.....}  选择特定的 div 标签的同级的所有图片

2. RBGA透明度：IE系列全不支持，Weskit核心系列、Firefox 3+ 和Opera 9.5+支持

    background: rgba(255, 0, 0, 0.5 )     : 最后一个参数表示透明度</span>

       rgba的透明度只影响指定元素，而Opacity还会影响到指定元素的子元素

3. 多栏布局: Webkit核心系列和Firefox 2+支持

     在Webkit核心系列浏览器(safari、chrome等)中使用时，加'-webkit' 前缀

    -webkit-column-count : 3 ;     分栏总数
    -webkit-column-gap : 1.5em ;     栏之间的间距
    -webkit-column-rule : 1px solid #999 ; 栏间分割线

       在Firefox览器中使用时，加'-moz' 前缀 

 -moz-column-count : 3 ; 
 -moz-column-gap : 1.5em ; 
 -moz-column-rule : 1px solid #999 ;

 4. 多背景图片

 background: url(a.jpg) top left no-repeat , url(b.jpg) top right no-repeat , url(c.jpg) bottom right no-repeat ,url(d.jpg) bottom left no-repeat ;

 5. 字符串溢出

word-wrap: break-word or normal /*防止太长的字符串溢出  normal:只允许在断点截断文字，如连字符 ；break-word 强制换行 */

  6. 块阴影和文本阴影

-webkit-box-shadow: 2px 2px 10px #ccc/*块阴影*/
text-shadow:10px 10px 20px #06C/*文本阴影*/

7. 圆角

border：1px solid #333;
-webkit-boder-top-right-radius : 20px;
-webkit-boder-top-left-radius : 20px;</span>

8. 边框图片

-webkit-border-image: url(b.jpg) 124/*124为边框宽度*/

9. 形变：各浏览器都支持的属性

-webkit-transform : rotate(5deg);/*2D旋转，倾斜5度*/  /*要先声明-webkit-transform-origin  如：-webkit-transform-origin:0 2px*/
-webkit-transform : scale(1.00, 1.50);/*2D伸缩，第二个参数默认与第一个参数一样*/
-webkit-transform : skew(1.5, 1.5);/*斜切变换，第二个参数默认为0*/
-webkit-transform : translate(5px, -2px);/*2D translation 第二个参数默认为0*/

10. 总结
     CSS3新增的样式可以使用户更加快速地访问互联网：不需要图片也能实现某些很酷的效果，不会影响浏览器的加载速度；更容易被搜索引擎搜索