关于H5（2）

有关H5的CSS小效果：
1:背景图生效位置的三种写法：

1：background-origin:border-box;     边框生效位置
2：background-origin:content-box;    内容生效位置
3：background-origin:padding-box;    默认位置

2:文本开切位置的写法：

（写文本开切位置时，-webkit-background-clip:text;  color:rgba(0,0,0,0) 要都写才可以）
  -webkit-background-clip:text;
   color:rgba(0,0,0,0);     配合使用

3:倒影的写法：-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));

    1:below   表示为：向下
    2:above   表示为：向上
    3:left  表示为：向左
    4:right 表示为：向右
    5:10px    表示为：间距（这个值根据自己需求随便定义）

4:滤镜的写法：

      -webkit-filter:blur(0px);

5:块的缩放大小写法：

     resize:both;

6:缩放大小完整写法：

    resize:both; overflow:hidden;

7:文本排序的写法：

  direction:rtl; unicode-bidi:bidi-override;

8:变形的写法：

1：transform:
    a：skew(X轴值，Y轴值)     倾斜度数    单位使用（deg）
    b：scale(X轴值，Y轴值)        缩放比例
    c：translate(X轴值，Y轴值)    平移像素    单位使用（px）
    d：rotate                    旋转度数    单位使用（deg）
2：变形样式是从后往前读
    transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);

9:旋转控制中心点的写法：

transform-origin:X轴值Y轴值;
        1:left
        2:Right
        3:top
        4:bottom
          20px 20px

10:景深的写法（用来配合3D效果）

transform:perspective(800px);
   括号里的值为800-1200之间值时效果最好。
perspective:800px;

11：3d的写法：（注意：当写3D效果时要加给父级，3D效果是不可以继承的）

transform-style:preserver-3d;

12：物体的变形写法：

transform:
         1:scale       X轴值  Y轴值 
         2:rotate      X轴值  Y轴值  Z轴值
         3:translate   X轴值  Y轴值  Z轴值
         4:skew        X轴值  Y轴值

13：判断运动结束后的监听事件：

transitionend（要配合事件绑定使用）
obj.addEventListener('transitionend',fn,false);

14: H5里有关滚动条的写法 pageX pageY获取鼠标位置自带滚动距离

  1:表单:
      1:email
      2:number
      3:color
      4:range
      5:date
      6:week
      7:month
      8:url
      9:tel
      10:search
   2:表单新增属性
      1:required         必填
      2:pattern          里面放正则
      3:step             一次加几个
      4:placeholder      提示文字
      5:autofocus       自动获取焦点
      6:autocomplete    
          on            开启提示文字
          off          关闭提示文字
      7:title           改变提示框提示文字

15:序列化:

1:{a:1,b:5} 不标准格式                                   
2:序列化      变成标准格式json
    JSON.stringify(json)

16:反序列化

1:JSON.parse(json)  把字符串转成正常json格式

交互解析字符串一共三种方法
    1:parse
    2:eval
    3:new Function('return abc');