css3样式兼容写法

在当今互联网发展的时代，如何编写兼容各种浏览器的CSS3样式成了前端工程师必须掌握的一项技能。下面，我们将带大家一起来学习CSS3样式的兼容写法。

.Box {
    /* IE浏览器 超过IE9支持 */
    background-color: #f00;
    /* 在IE6-9中都会读取*/
    font-size: 14px;
    /* IE6-8 */
    _width: 600px;
    /* IE6-8 */
    _height: 400px;
    /* IE7和IE8浏览器 背景半透明*/
    filter: alpha(opacity=50);
    /* 除IE6-8之外的浏览器，使用CSS3新增的属性 */
    transform: scale(1.1);
    /* IE9及以上和其他现代浏览器*/
    border-radius: 5px;
}

css3样式兼容写法

首先，在背景颜色这个属性上，我们可以看到没有任何兼容问题，不需要再写其他的 CSS3 兼容代码。接下来，在指定字体大小上，我们需要注意的是，IE7、IE8、IE9 等老旧浏览器也能够正常渲染，因此不需要额外的兼容代码。接下来的两行代码，都是针对 IE6、IE7 和 IE8 浏览器的兼容写法。

接着，我们看到 filter 属性，这个属性只有 IE 浏览器才支持。在 IE 中使用 filter 属性的时候，需要调用 Alpha 滤镜，当然了，我们可以进一步利用透明度的值，使得背景色更加协调，在代码中 opacity 取值范围为 0 到 1，filter 中利用设置透明度。

最后一行 CSS3 属性代码，是设置圆角。其实，盒子模型的圆角可以使用 CSS3 border-radius 属性来实现。IED9 及以上支持这个属性，但是，如果要兼容低版本的浏览器，我们可以使用 vender 样式。比如下面的样式设置 outer-width。

.Box{
    -moz-border-radius: 5px; /* FireFox */
    -webkit-border-radius: 5px; /* Safari 和 Chrome */
    border-radius: 5px; /*IE9及以上和其他现代浏览器*/
}

以上就是 CSS3 样式兼容的写法分享，如有不对之处，欢迎指正。

相关推荐