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

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

[b] 新增的属性[b]选择器：[/b][/b]

[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>

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

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

[/b][/b]

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

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

[b] [b]在[b]Firefox览器中使用时，加'-moz'
前缀[/b][/b][/b]

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

[b]4. 多背景图片[/b]

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 ;

[b] [b]5.
字符串溢出[/b][/b]

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