• css3.0新属性效果在ie下的解决方案(兼容性)


    css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!我们收集整理了一些css3.0新属性效果在ie下的解决方案!

    .box_round {
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3+, Chrome */
    border-radius: 12px; /* Opera 10.5, IE 9 */
    }

    .box_shadow {
    -moz-box-shadow: 0px 0px 4px #fff; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 4px #fff; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #fff; /* Opera 10.5, IE 9.0 */
    }

    .box_gradient {
    background-image: -moz-linear-gradient(top, #444, #999); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444),color-stop(1, #999)); /* Saf4+, Chrome */
    filter: progidXImageTransform.Microsoft.gradient(startColorStr='#444, EndColorStr='#999); /* IE6,IE7 */
    -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#444, EndColorStr='#999)"; /* IE8 */
    }

    .box_rgba {
    background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
    filter: progidXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */
    }

    .box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */
    -o-transform: rotate(7.5deg); /* Opera 10.5 */
    -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */
    zoom: 1;
    }

    .box_transition {
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
    }

    /* */@font-face {
    font-family: 'WebFont'; src: url('myfont.eot'); /* IE6+ */
    src: local('?'), url('myfont.woff') format('woff'), /* FF3.6 */
    url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
    }

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    php 23种设计模型
    PhpStrom 常用的插件
    PhpStrom 好用的代码小地图插件
    php 23种设计模型
    phpstrom怎样显示类的方法或函数列表
    超好用的谷歌助手插件
    PhpStrom 好用的翻译插件
    php 23种设计模型
    【java】匿名对象
    【java】类的初识
  • 原文地址:https://www.cnblogs.com/taofx/p/4139320.html
Copyright © 2020-2023  润新知