CSS3使用小技巧

目前CSS3越来越被浏览器所支持，虽然并没有完全支持。但是也是一朵新秀了.

但是当我们使用时，会发现，效果没达到，或者在某个浏览器上并没有出现效果.

又或者我们经常看到 -moz,  -wekit什么的，是什么呢？

原因:

1: 浏览器不兼容这个效果

2: 写CSS的时候缺少前缀

第一点我们自然无法改变了。

而第2点.是需要我们知道的.

比如我们使用CSS3的样式：border-left-colors：#111 #222 #333；

当我们运行时，FireFox, Chrome, Opera, Safari ，IE都没有这个效果).

这是为什么呢?因为浏览器本身并没有完全支持CSS3，又或者说某些CSS3还没有成为标准,所以我们需要给他加上专有的标志.也就是某些浏览器特有的CSS拓展.

FireFox拓展前缀:-moz

Chrome和Safari拓展前缀:-wekit

IE9拓展前缀:-ms

Opera拓展前缀:-o

 

所以，当我们写一个CSS3样式时，通常会这样写

-webkit-CSS3样式:值;　/* 针对使用WebKit排版引擎的浏览器，如Google Chrome、Apple Safari */
-moz-CSS3样式:值;　/* 针对使用Gecko排版引擎的浏览器，如Mozilla Firefox */
-o-CSS3样式: 值;　/* 针对使用Presto排版引擎的浏览器，如Opera */
-ms-CSS3样式: 值;　/* MSIE, 但 Release Preview 起可以不用前缀 */
CSS3样式: 值;　/* CSS3标准，放最后 */

这样就可以确保我们兼容多个浏览器样式了.不过这样的话，CSS会因此增大，等到这个样式成为标准后，又要花费时间把前缀去掉，有点浪费时间啊- -纠结