浏览器私有前缀 - CSS3

由于CSS3新增的有些属性尚未成为W3C标准的一部分，因此对于这些属性来说，部分浏览器都只能识别“带有自身私有前缀的属性”。也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。

在CSS3中，常见的浏览器私有前缀如下表所示。这些私有前缀以及对应的浏览器，我们都是要记住的，这一点大家要清楚。

浏览器私有前缀
私有前缀	对应的浏览器
-webkit-	Chrome和Safari
-moz-	Firefox
-ms-	IE
-o-	Opera

举个例子，如果我们想要使用CSS3来实现边框阴影效果，可能会这样写：

box-shadow: 5px 5px 10px red;

但是并非所有浏览器都能识别box-shadow这个属性，例如Chrome只能识别-webkit-box-shadow（前缀为-webkit-），而Firefox只能识别-moz-box-radius（前缀为-moz-）。因此，如果想要让所有主流浏览器都能实现边框阴影效果，我们需要这样写：

box-shadow: 5px 5px 10px red;
-webkit-box-shadow: 5px 5px 10px red;
-moz-box-shadow: 5px 5px 10px red;
-ms-box-shadow: 5px 5px 10px red;
-o-box-shadow: 5px 5px 10px red;

不过现在主流浏览器最新版本对CSS3的支持都特别好，我们已经不需要再去为大多数属性做兼容处理了。在接下来的学习中，对于CSS3属性的书写，如果没有特别说明，我们都不需要再去做兼容处理。如果有特殊说明，我们再去像上面那样作兼容处理。

此外，建议大家安装一下最新版本的Chrome、Firefox等来学习CSS3。在前端开发中，往往都是需要做兼容处理的，需要经常检查页面在各个浏览器的预览效果是否正常。要是只装个360浏览器，那还做什么前端开发呢，对吧？

常见问题：

1．对于IE浏览器来说，暂时只有IE9及以上版本支持CSS3属性，但是有时候我们需要兼容IE6~IE8，这该怎么实现呢？

对于IE6~IE8的兼容，我们可以借助ie-css3.htc这个扩展文本来实现。对于ie-css3.htc这个文件，小伙伴们可以到本书配套源代码文件中找一下。

div
{
    /* 通知IE浏览器调用ie-css3.htc文件作用于div元素*/
    behavior: url(ie-css3.htc); 
    /*接下来，div元素就可以使用CSS3属性了*/
    border-radius: 15px; 
    box-shadow: 10px 10px 20px #000; 
}

不过还有以下2点需要跟大家说明的。

（1）当前元素一定要有定位属性，如position:relative或position:absolute，否则ie-css3.htc无法生效。
（2）ie-css3.htc文件支持的CSS3属性有限，暂时只支持border-radius、box-shadow、text-shadow属性。

2．如果想要兼容360、搜狗、QQ等浏览器，浏览器前缀该怎么写呢？

其实，这些浏览器使用的的内核跟几个主流浏览器的内核是一样的，因此我们只需要写上-webkit-、-moz-等前缀就可以了。

3．如果我不清楚某个CSS3属性在各大浏览器的兼容性情况，可以去哪里查阅资料呢？

我们可以到caniuse这个网站上，输入你想要查找的属性，然后就会显示非常详细的信息，如下图所示。