HiDocs

CSS3

CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持

CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。

一、浏览器内核以及其前缀

CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情

况下提前支持会有风险，==浏览器厂商对新属性（实验性质的属性）的支持情况也不同，所以会加厂商前缀加以区分==。如果某个属性已经

从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经

很成熟，不用加前缀。

二、不同的浏览器内核

根据不同的浏览器内核，css前缀会有不同。==最基本的浏览器内核有如下四种==，其它的内核都是基于此四种进行再研发的。

1.Gecko内核前缀为-moz- 火狐浏览器

2.Webkit内核前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用该内核。国内

很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。

3.Trident内核前缀为-ms- 也称IE内核，IE浏览器

4.Presto内核前缀-o- 目前只有opera欧朋浏览器采用

例如：实现一个文字镂空的效果

使用描边属性：text-stroke，这是一个测试属性，只在谷歌上面支持，必须加上浏览器私有前缀：-webkit-

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器私有前缀</title>
    <style>
        div{
            font-size:100px;
            color:transparent; /*透明色*/
            position: absolute; /*让图片可以作为背景图，不占用原来的物理位置*/
            -webkit-text-stroke:1px #f00;  /*描边*/
        }
    </style>
</head>
<body>
     <div>
         学习猿地
     </div>
     <img src="./img/logo2.png" alt="">
</body>
</html>

注：标准语法

一般在实际使用中通常将所有前缀写一遍后，标准的写在最后，为了保证所有浏览器都可以兼容（当这个属性在所有浏览器中都是实验性质时）

-moz-animation: ;火狐支持

-o-animation: ; 欧朋支持

-webkit-animation: ; chrome 和 safari支持的

-ms-accelerator: IE支持的;

animation: ;标准的

CSS3 ​

CSS3