CSS3浏览器私有属性

  CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时,需要在属性前加上浏览器的私有前缀,然后该种内核的浏览器才能识别相应的CSS3属性。例如给一个div设置CSS3的-border-radius-时,chrome浏览器只能识别-webkit-border--radius-(前缀为-webkit-),而firefox浏览器只能识别-moz-border--radius-(前缀为-moz-),IE浏览器只能识别-ms--radius-(前缀为-ms-),opera浏览器只能识别-m-radius-(前缀为-m-)。

  例子:

  一个CSS3圆角的代码是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CC圆形</title>
    <style>
          div{
               width:100px;
               height:100px;
               text-align: center;
               vertical-align: middle;
               background:green;
               -webkit-border-radius: 50%;/*兼容Chrome/Safari*/
             -o-border-radius: 50%;  /*兼容Opera*/
             -moz-border-radius: 50%; /*兼容Firefox*/
             -ms-border-radius: 50%; /*兼容IE*/
              }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

  对于CSS3某些特性属性的书写,我们都要像上述代码那样做兼容处理。不管我们对浏览器内核前缀有多么的讨厌,我们都不得不每天面对它,否则有些东西不能正常工作,目前还没有形成统一的兼容,所以用到CSS3的一些功能的时候都需要写上,避免出现不兼容的模式。

猜你喜欢

转载自www.cnblogs.com/songtianfa/p/11209140.html