前言：

累么？累就對了，舒服是留給死人的

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

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)             旋轉(zhuǎn)(z軸)
        scale(x倍數(shù),y倍數(shù))      縮放
        skew(xdeg,ydeg)         拉伸(扭曲)
    -----------------------------------------------
    設(shè)置原心位置
    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(度數(shù),color1 start, color1 end, color2 start, color2 end...);
    徑向漸變
        radial-gradient(方向,color1, color2);

    背景
        background-size

    文本切片
        1.給元素設(shè)置漸變背景
        2.設(shè)置文本切片
            -webkit-background-clip: text;
        3.文字透明
        eg: color: rgba(0,0,0,0);
            background: -webkit-linear-gradient(角度, color1, color2...);
            -webkit-background-clip: text;