css3部分屬性兼容性別扭寫法（因為很多我就叫他別扭了，希望全面早早支持css3吧）

/*圓角class,需要設置圓角的元素加上class名稱*/
.roundedCorners{
    -webkit-border-radius: 10px;/*webkit內核瀏覽器*/
    -moz-border-radius: 10px;/*moz內核瀏覽器*/
    border-radius:20px;/*直接支持css3圓角屬性的瀏覽器（如IE10）*/
}/*配合js使用*/
/*透明度class,需要設置透明度的元素加上class名稱*/
.transparent{
    -webkit-opacity:0.3;
    -moz-opacity:0.3;
    opacity: 0.3;
    filter:alpha(opacity=30); /*for IE 6,7,8*/
}
/*盒陰影class,需要設置陰影的元素加上class名稱（注：IE9上圓角顯示有出處，IE8上圓角和透明度屬性會無效，IE7上透明度屬性會無效）*/
.boxShadow{
    -webkit-box-shadow:5px 5px 5px #000;
    -moz-box-shadow:5px 5px 5px #000;
    box-shadow:5px 5px 5px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');/* For IE6,7,8 */
}
/*CSS3字體擴展之兼容寫法
*
*/
@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
/*CSS3 2D 轉換 旋轉 rotate()方法：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。（按中心旋轉）
*不支持IE9以下
*/
.transformRotate{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);        /* IE 9 */
    -webkit-transform: rotate(30deg);    /* Safari and Chrome */
    -o-transform: rotate(30deg);        /* Opera */
    -moz-transform: rotate(30deg);      /* Firefox */
}
/*CSS3 2D 轉換 移動 translate()方法：元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數
*不支持IE9以下
*/
.transformTranslate{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);        /* IE 9 */
    -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
    -o-transform: translate(50px,100px);        /* Opera */
    -moz-transform: translate(50px,100px);      /* Firefox */
}
/*CSS3 2D 轉換 縮放 scale()方法：元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數
*不支持IE9以下
*/
.transformScale{
    transform: scale(2,4);
    -ms-transform: scale(2,4);    /* IE 9 */
    -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
    -o-transform: scale(2,4);    /* Opera */
    -moz-transform: scale(2,4);    /* Firefox */
}
/*CSS3 2D 轉換 組合 matrix()方法：matrix() 方法把所有 2D 轉換方法組合在一起。
*matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
*不支持IE9以下
*/
.transformMatrix{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

其中有很詳細備注，還有一點要說的是css的圓角不光只是設置css屬性，還有js部分，以下是解說

備注上說的配合js原理如下

在你的html頁中引入

<script type="text/javascript" src="assets/plugins/curvycorners.js"></script><!--兼容IE6以上圓角屬性-->

curvycorners.js網上查下吧，這里就不給鏈接了！
再在你的js文件里寫上：

$(function () {
    addEvent(window, 'load', initCorners);/*IE9及以下版本的CSS3圓角屬性兼容代碼*/
    function initCorners() {
        var setting = {
            tl: {radius: 20},
            tr: {radius: 20},
            bl: {radius: 20},
            br: {radius: 20},
            antiAlias: true
        }
        curvyCorners(setting, ".roundedCorners");/*綁定需要生成圓角的元素*/
    }
})

如果要綁定多個元素就可以這樣寫：

curvyCorners(setting, ".roundedCorners1");

curvyCorners(setting, ".roundedCorners2");

curvyCorners(setting, ".roundedCorners3");

讓IE低版本兼容css3偽標簽：

<!- -[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="bower_components/selectivizr/selectivizr.js"></script><!--兼容IE對CSS3偽類和屬性選擇器的支持（詳細支持列表請看explanation/說明images/selectivizr旋轉器列表.png）-->
    <!--<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>&lt;!&ndash;瀏覽器不支持腳本時的css文件路徑&ndash;&gt;-->
    <![endif]- ->

其支持的偽標簽：

同樣文件自己百度吧！

讓IE支持HTML5已定義標簽：

 <!-[if IE]>
    <script src="assets/plugins/html5.js"></script>
    <![endif]->
    <!--
    網絡連接html5.js地址
    http://html5shiv.googlecode.com/svn/trunk/html5.js
    簡化版html5.js文件內容
        ＜!–[if IE]>
            ＜script>
                (function(){if(e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement_x(e[i])}})()
            ＜/script>
        ＜![endif]–>
    -->