[分享]css3属性支持情况

CSS3是Cascading Style Sheets（层叠样式表）的第三个版本，其在设计之初就考虑到了可扩展性和卓越性能的问题。CSS3中包含了许多新的属性，这让Web开发者们能够更加方便地实现各种...

CSS3是Cascading Style Sheets（层叠样式表）的第三个版本，其在设计之初就考虑到了可扩展性和卓越性能的问题。CSS3中包含了许多新的属性，这让Web开发者们能够更加方便地实现各种炫酷的效果。然而，不同的浏览器对CSS3的支持情况并不一致，这常常会给开发者造成麻烦。

下面是一些常用的CSS3属性及其在不同浏览器中的支持情况：

 /*圆角*/
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    
    /*阴影*/
    box-shadow: 2px 2px 2px #333;
    -moz-box-shadow: 2px 2px 2px #333;
    -webkit-box-shadow: 2px 2px 2px #333;
    -o-box-shadow: 2px 2px 2px #333;
    -ms-box-shadow: 2px 2px 2px #333;
    
    /*渐变*/
    background: -webkit-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue);
    background: -o-linear-gradient(red, blue);
    background: linear-gradient(red, blue);
    
    /*transform*/
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    
    /*transition*/
    transition: width 1s;
    -moz-transition: width 1s;
    -webkit-transition: width 1s;
    -o-transition: width 1s;
    -ms-transition: width 1s; 

如上所示，为了让CSS3可以在不同的浏览器中兼容，我们需要使用不同的前缀来声明属性。如“-webkit-”前缀用于WebKit引擎，而“-moz-”前缀用于Firefox浏览器。

除了以上列举的属性外，CSS3还有许多其他的新属性，如动画、伸缩盒布局等等。不过，需要注意的是，不同浏览器在实现这些新属性时可能存在一些差异，因此我们需要耐心地进行测试和调试。