四时宝库

内核类型 写法

Trident(IE) -ms-columns IE浏览器使用的内核

Webkit(Chrome/Safari) -webkit-columns 苹果公司自己的内核，也就是苹果的Safari浏览器使用的内核;

google的chrome也使用webkit作为内核; 360安全浏览器也是WebKit内核(Chrome)

Gecko(Firefox) -moz-columns 目前最主流的Gecko内核浏览器是Mozilla Firefox

Presto(Opera) -o-columns 目前Opera采用的内核

在Dreamweaver软件代码提示中内置了以上四种私有属性前缀

Konqueror(linux) -khtml-columns KDE开发的内核,常见的KHTML内核的浏览器：Konqueror

W3C columns

是先写私有的CSS3属性, 再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

去掉CSS3前缀 rotate:旋转

360安全浏览器是基于WebKit内核(Chrome)的浏览器

360的极速浏览器基于IE内核和webkit内核(Chrome)的双核浏览器

浏览器内核查询网站:http://ie.icoa.cn/

私有属性可用于:

border-radius(圆角矩形)

div{
width:200px;height:120px;
border:2px solid #000000;
background-color:#FFFF00;
border-radius:20px; /* CSS3中的圆角矩形 */
-moz-border-radius:20px; /* mozilla中的圆角矩形 */
-webkit-border-radius:20px; /* Safari 3中的圆角矩形 */
}

opacity(透明度)

.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity:0.5; /* 支持opacity的浏览器*/
}

简单解释，IE使用私有属性filter:alpha(opacity=50)(也可写成冒号filter:alpha(opacity:50))，Moz Family使用私有属性-moz-opacity:0.5，

而标准的属性是opacity, 后面的数值是透明度，使用小数表示的数值

以上直接可以简化:

.opacity{
filter:alpha(opacity:30); opacity:0.3; /*兼容所有的浏览器 */
}

以上实例可见:javascript|运动基础及实例|淡入淡出

渐进增强(先保证低版本浏览器)

.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

优雅降级(先保证高版本浏览器)

.transition{
　　 transition: all .5s;
　　 -o-transition: all .5s;
　-moz-transition: all .5s;
-webkit-transition: all .5s;
}

如何决定:

根据你的用户所使用的客户端的版本来做决定?