[分享]css3怎么实现兼容

CSS3是目前前端开发广泛使用的一种技术，但是由于不同浏览器的支持程度不同，可能会出现兼容性问题。下面我们来看一些实现CSS3兼容的方法。/ 1.使用浏览器前缀 / .box{ webkitborde...

CSS3是目前前端开发广泛使用的一种技术，但是由于不同浏览器的支持程度不同，可能会出现兼容性问题。下面我们来看一些实现CSS3兼容的方法。

/* 1.使用浏览器前缀 */
.box{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
} 

可以发现，上述代码中我们使用浏览器前缀来实现圆角边框效果，-webkit-是针对chrome和safari浏览器，-moz-是针对火狐浏览器。

/* 2.使用hack方法 */
.box{
  background-color:red;/*所有浏览器都支持的属性*/
  _background-color: green;/*只有IE6浏览器支持*/
  +background-color: blue;/*只有IE7浏览器支持*/
  *background-color: yellow;/*IE6, IE7, IE8都支持*/
} 

上述代码中我们使用hack方法实现了不同版本的IE浏览器支持不同的背景颜色效果。

/* 3.使用Javascript脚本判断浏览器版本 */
var userAgent = navigator.userAgent;//获取浏览器版本
if(userAgent.indexOf('Chrome')!=-1){//判断是否是chrome浏览器
  document.body.style.backgroundColor = 'blue';
}else if(userAgent.indexOf('Firefox')!=-1){//判断是否是火狐浏览器
  document.body.style.backgroundColor = 'green';
}else{
  document.body.style.backgroundColor = 'red';//其他浏览器
} 

上述代码中我们通过Javascript脚本获取了当前浏览器版本，然后根据不同的浏览器版本实现了不同的背景颜色效果。

在实际开发中，我们可以根据具体情况选择不同的兼容方法，以达到最佳的效果。