1217

资源：
css3制作工具
css3按钮生成
css3制作特殊效果-web前端实验室

浏览器的型号和css3前缀

五种主流的浏览器：IE、Firefox、Safari、Chrome及Opera。

浏览器的内部工作原理（太详细，想睡觉了就读一下好了😂）

-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不一定) */ 

需要添加前缀属性的主要属性

@keyframes
移动和变换属性
(transition-property, transition-duration, transition-timing-function, transition-delay)
动画属性 
(animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column属性
flex属性
perspective属性

css3前缀详解

易混淆的内联元素和块级元素

• 内联元素：<a></a> <i></i> <input> <img> select span
• 块级元素：<ul></ul> <li></li> <h></h> <hr>

table属性的几个值运用

• table-layout:auto|fixed(表格固定算法)
• border-collapse:separate | collapse
• display:table|cell|row(表格里的元素会自动根据表格里面文字大小计算表格大小)(td标签就可以自由控制表格宽度)

css3选择器

• 兄弟选择器 ~
• 相邻兄弟选择器 +
• :nth-child(n/2n/2n+1/2n-1/1/2/3)
• :nth-of-type(li/ul/span)

<ul>
     <span>a</span>
     <li>b</li>
     <li>c</li>
     <li>d</li>
</ul>
ul li:nth-child(1){...}/*无法选中第一个li元素，因为渲染时会先检查小括号里面的，在看外面的li*/
ul li:nth-of-type(li){...}/*可以选中第一个li元素*/

css3中几个常用的属性

• border-radius
• box-shadow
• @font-face
• transform
• tansition
• @keyframes

另附几点

• css-sprite
• css3动画小技巧：位置改变一定会重绘页面，渲染GPU > CPU translateZ(0)、translate3d(X,Y,0)【渲染告诉浏览器开启GPU加速】