CSS3

选择器

    document.querySelectorAll();
    document.querySelector();

自定义属性

    data-xxxh
    oEle.dataset.xxx;

class操作

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

border-radius(圆角)

        border-radius:  px  %   em  rem;
        border-radius: 左上右上右下左下;
        border-radius: 左上右下 右上左下;
        border-radius: 左上 右上左下 右下;
        border-radius: 左上 右上 右下 左下;

浏览器前缀

        -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

阴影

盒子阴影
        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;

变形

        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);

文本切片

    1.给元素设置渐变背景
    2.设置文本切片
            -webkit-background-clip: text;
    3.文字透明

蒙版

-webkit-mask      显示有颜色的地方

transform

rotate()                Z轴旋转
rotateX()               X轴旋转
rotateY()               Y轴旋转

透视
    
    transform: perspective(透视值); 
        值   推荐800-1200
        大   不明显
        小   明显
translate(x,y)          x、y轴平移
translateZ()            Z轴平移

要改变translateZ，父级必须是3D
    -webkit-transform-style: preserve-3d;
    父级一定要透视
    如果父级有旋转XY之类的
    -webkit-transform: perspective() rotateX/Y();
    如果父级什么都不需要
    perspective: 800px;

注意：
    1.执行有顺序(后面的先执行)
    2.行元素有问题(不能操作行元素)