1、CSS3样式顺序：

　　1个元素包含两个类，且是类名列表的形式：

　　　　两个类中有相同的属性，后面的会覆盖前面的，除非有属性加了!important，如：

<div class="ca cb">text</div>
.ca {
    color:blue;
}
.cb {
    color:red
}

　　　　字体颜色是红色；

　　1个类中出现多次相同的属性，最后出现且生效(浏览器支持)的属性覆盖前面，如：

.ca {
    color:red;
    color:blue;
    color:#fffff;
}

 　　　　字体颜色是蓝色，因为最后一个是不支持的颜色；

　　内联样式会覆盖内部样式，除非有属性加了!important，如：

<div class="ca" style="color:#000;">text</div>
.ca {
    color:red;
    color:blue !important;
    color:#fffff;
}

　　颜色仍是蓝色，若未加important，则是黑色。

2、

@font-face {
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
　　,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

　　font-weight:bold;：指定Sansation_Bold的应用范围为<b>，其中bold等价于700。

3、web-kit：

　　WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）；

　　WebKit的优势在于高效稳定，兼容性好，且源码结构清晰，易于维护。

4、transform：

　　类似于相对定位，盒子固定，内容转换，后面覆盖前面。

　　scale(1,2)：转换后元素的中心点不变。

5、css的潜规则：

　　形式上缺少的参数，默认取与已出现参数相同的值：

　　　　比如，缺少Y方向参数，取值X方向参数值，仅仅是多数情况下。

6、transform:skew(0deg,10deg);：

　　一言以蔽之，乱；

　　坐标轴的中心原点为元素的几何中心，变换前后保持不变；

　　skew解释为旋转：

　　　　w3school的解释是 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度；

　　　　这里的坐标系是水平为X轴，右向为正方向，垂直为Y轴，下向为正方向；

　　　　翻转是结果的抽象描述，可以对照前后图来脑补元素的旋转过程：

　　　　　　以正对眼睛的页面为内外分界面；

　　　　　　X参数为正值，或者设置skewX()，表示围绕X轴，向X轴正方向看去，顺时针翻转对应角度；

　　　　　　Y参数为正值，或者设置skewY()，表示围绕Y轴，向Y轴正方向看去，逆时针翻转对应角度。

　　　　显然这种解释不利于从参数推测到结果(人工绘制)。

　　skew解释为倾斜：

　　　　实际上是坐标轴的倾斜；

　　　　这里的坐标系是水平为Y轴，右向为正方向，垂直为X轴，下向为正方向；

　　　　倾斜过程如下：

　　　　　　X参数为正值，或者设置skewX()，表示X轴逆时针(正对页面)旋转对应角度，元素垂直高度不变，但向左倾斜；

　　　　　　Y参数为正值，或者设置skewY()，表示Y轴顺时针(正对页面)旋转对应角度，元素水平宽度不变，但向下倾斜。

　　　　显然这种解释方便从参数得到结果，但坐标系的解释缺少根据。

7、2D变换：

　　变换矩阵的意义：

　　　　线性空间里，给定一个原点，选择一组向量基，可用向量及其间的关系刻画空间里的任何对象；

　　　　而矩阵可以描述对象的变换过程，包括平移、缩放、旋转、倾斜等；

　　　　变换矩阵与向量相乘即可得到变换结果。

　　transform: matrix(a,b,c,d,e,f);：

　　　　变换矩阵如下：

　　　　　　

　　　　变换过程：

 

　　　　　　

　　　　变换结果：

　　　　　　

　　　　变换总结：

　　　　

　　　　

　　　　

　　　　

　　　　参数数值不加单位。

8、transform-origin：

　　定义旋转元素的基点；

　　默认中点：

　　　　如果只设置transform-origin:left;，意味着基点在左中处。

　　transform-origin: x-axis y-axis z-axis;：