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的一些功能的时候都需要写上,避免出现不兼容的模式。