css学习知识点

各个前缀所代表的浏览器：

Webkit: chrome, safari【也有可能是opera】

Moz: 火狐

Ms: 主要是IE

O: opera

border-radius:  IE9  -webkit- ,  -moz-

background-image,background-origin, background-clip： ie9  无前缀

Background-size: ie9    -webkit-   -moz-   -o-

background-origin: border-box, padding-box, content-box

 

渐变： IE10, 所有渐变的前缀： -webkit- ,  -moz- ,  -o-

Linear-gradient: 线性渐变 语法

①： Background: linear-gradient(direction, color1, color2, ......)，默认： direction: 从上到下。如：

Background：-webkit-linear-gradient(blue, red);

Background：-moz-linear-gradient(blue, red);

Background：-o-linear-gradient(blue, red);

Background：linear-gradient(blue, red);

 

注意direction的方向上的不同:如 【从左到右】

Background：-webkit-linear-gradient(left, blue, red);   

//注意-webkit-的方向的写法

Background：-moz-linear-gradient(right, blue, red);

Background：-o-linear-gradient(right, blue, red);

Background：linear-gradient(to right, blue, red); //标准写法

 

② background：linear-gradient(angel, color1, color2)，

0deg: 表示从下（color1）到上(color2)的渐变

90deg: 表示从左（color1）到右(color2)的渐变

 

文本效果：

Text-shadow: ie10 ,

h1{ background-color: #ddd;

text-shadow: 2px 2px 4px #000;

color: #fff;

padding: 6px 10px;}

 

Box-shadow: ie9, 如 -webkit- , -moz-

div{ width:300px;

   height:100px;

background-color:yellow;

box-shadow: 0px 0px 15px #888888; }

 

Word-break: 不兼容opera

字体：@font-face: ie9

@font-face
{
font-family: myFirstFont;
src: url(引入字体文件);
}

 

2D动画篇

 

Transform, transform-origin:    IE9,  -webkit-,  -ms-, -webkit-, -o-

 

------------------未待完续，敬请期待。