[分享]css中属性兼容性写法

在css样式编辑中，我们常常会遇到一些浏览器对某些属性支持度不同的问题，这时候就需要使用属性兼容性写法来应对这种情况，以下是一些常见的属性兼容性写法:/ 首先是针对不同浏览器的前缀写法 / / Saf...

在css样式编辑中，我们常常会遇到一些浏览器对某些属性支持度不同的问题，这时候就需要使用属性兼容性写法来应对这种情况，以下是一些常见的属性兼容性写法:

/* 首先是针对不同浏览器的前缀写法 */

/* Safari 和 Chrome */
.test {
    -webkit-border-radius: 5px;
}

/* Firefox */
.test {
    -moz-border-radius: 5px;
}

/* IE10+ */
.test {
    -ms-border-radius: 5px;
}

/* Opera */
.test {
    -o-border-radius: 5px;
}

/* IE6-9 */
.test {
    border-radius: 5px; /* 注意，这行代码应该放在上面四行代码之后 */
}

/* 接下来是一些特殊情况的兼容性写法 */

/* IE6-7不支持透明度，可以用filter来实现，但要注意ie8及以上也支持filter，所以此时应该用下面的兼容性写法 */
.test {
    background-color: rgba(255, 255, 255, 0.5); /* 标准透明度写法 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF); /* IE6-9兼容写法 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF)"; /* IE8+兼容写法 */
}

/* 如果要使用CSS3的transform属性，有些浏览器需要加上-webkit-前缀 */
.test {
    transform: rotate(45deg); /* 标准写法 */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
}

/* box-shadow属性同理 */
.test {
    box-shadow: 2px 2px 2px #888; /* 标准写法 */
    -webkit-box-shadow: 2px 2px 2px #888; /* Safari 和 Chrome */
    -moz-box-shadow: 2px 2px 2px #888; /* Firefox */
    -o-box-shadow: 2px 2px 2px #888; /* Opera */
} 

以上是一些常见的属性兼容性写法，总之，写好兼容性代码可以让我们的网页更加完美，为用户带来更好的体验。