前言：

累么？累就对了，舒服是留给死人的

--------------------------------正文---------------------------------

HTML5/CSS3

    HTML5
        就是html，只不过升级了
    CSS3
        就是css，只不过升级了

选择器

    document.querySelectorAll();     所有
    document.querySelector();        第0个

自定义属性

    data-xxxh
    oEle.dataset.xxx;

class操作

    oEle.classList
            .length             长度
            .value              所有class
        操作
            .add()              添加
            .remove()           删除
            .contains()         包含
            .toggle()           切换

浏览器前缀

        -webkit-        Chrome/Safari/opear/firefox(49+)
        -moz-           Firefox
        -ms-            IE
        -o-             Opear(old)
        不加前缀        W3C要求

        -webkit-border-radius       WebkitBorderRadius
        -moz-border-radius          MozBorderRadius
        -ms-border-radius           msBorderRadius
        -o-border-radius            OBorderRadius
        border-radius               borderRadius

CSS3：就是比CSS2新增了一些新样式

    rgba(red[0-255],green[0-255],blue[0-255],alpha[0-1]);

    border-radius           圆角
        border-radius:  px  %   em  rem(单位);

        border-radius: 左上右上右下左下;
        border-radius: 左上右下 右上左下;
        border-radius: 左上 右上左下 右下;
        border-radius: 左上 右上 右下 左下;

    阴影
        盒子阴影
        box-shadow: x偏移 y偏移 阴影范围 color;
        box-shadow: [inset] x偏移 y偏移 阴影范围 color;
        box-shadow: [inset] x偏移 y偏移 阴影范围 [扩展] color;
            阴影可以叠加
            box-shadow: x y opacity color, x y opacity color...;

        文字阴影
        text-shadow: x偏移 y偏移 阴影范围 color;
        text-shadow: x y opacity color, x y opacity color...;

    运动
    transition: duration style-type easing;
        eg: transition:1s all ease;

    变形
    transform
        translate(x,y)          平移(x、y轴)
        rotate(deg)             旋转(z轴)
        scale(x倍数,y倍数)      缩放
        skew(xdeg,ydeg)         拉伸(扭曲)
    -----------------------------------------------
    设置原心位置
    transform-origin: 横向 纵向;

    渐变
    线性渐变
        linear-gradient(color1, color2);
        linear-gradient(color1, color2, color3...);
        改变方向
        linear-gradient(方向, color1, color2, color3...);
        范围渐变
        linear-gradient(color1 start, color1 end, color2 start, color2 end,
 color3 start, color3 end...);
        跳变
        repeating-linear-gradient(度数,color1 start, color1 end, color2 start, color2 end...);
    径向渐变
        radial-gradient(方向,color1, color2);

    背景
        background-size

    文本切片
        1.给元素设置渐变背景
        2.设置文本切片
            -webkit-background-clip: text;
        3.文字透明
        eg: color: rgba(0,0,0,0);
            background: -webkit-linear-gradient(角度, color1, color2...);
            -webkit-background-clip: text;