学习笔记（一）

bug 集锦：
1. writing-mode:vertical-rl;在 Safari 上异常 （无解，等于苹果浏览器不能玩耍了）
2. transform 下的 fixed 失效 （能不用 fixed 绝不用）
3. transform 或 flex 影响下的各种渲染异常（超大坑）
4. Safari 中 perspective 与 z-index 渲染异常（只能用 translateZ 来改）
5. 多事件混淆（日了狗）

新知识点：
1. writing-mode（文字竖排）
2. stacking context & stack level（堆叠上下文及其顺序）
3. JSFuck（字符改乱码）
4. drop-shadow（过滤透明后的阴影设置）
5. $.velocity 更快的动画操作方法
6. SVG SMIL animation（SVG动画）
7. clip-path（CSS中的SVG）
8. CSS all:inherit;（还没怎么试，好像很好用的样子）
9. direction: rtl;下 inline 右对齐不换顺序，inline-block换序不对齐，text-align 依然有效（兼容很好，但效果不同，相当鸡肋）
10.background-clip:text（图片只作文字背景）
11.不对图片限定尺寸会造成页面布局重绘，影响加载性能
12.background-blend-mode（如PS的混合模式）
13.ol {counter-reset:sectioncounter;}li:before {content:"美女" counter(sectioncounter) "： ";counter-increment:sectioncounter;}（让content拥有序号）
14.contenteditable（该元素可输入）
15.will-change（提高动画效率，减少动画卡顿）
16.动画元素添加 z-index:1 可以减少对上下文的影响，减少卡顿

楷模：
1. http://species-in-pieces.com/
2. http://www.html5tricks.com/demo/html5-svg-smile-faces/index.html
3. http://www.html5tricks.com/demo/html5-3d-butterflies/index2.html
4. http://www.zhangxinxu.com/wordpress/2016/02/css-hollow-image-for-transition-background-color-problem-fixed/