CSS3

干了这碗毒鸡汤：为什么有些人要把追求精神满足和追求物质上的富足对立起来呢?你不幸福是因为你境界不高，你物质生活差是因为你能力不行。这完全是两回事儿。

一、选择器：

document.querySelectorAll();选取所有。
document.querySelector();第一个。

二、自定义属性：

data-xxx,
xx.dataset.xxx;

三、class操作

oEle.classList .length .value,
.add()          添加
.remove()       删除
.contains()     包含
.toggle()       切换

四、CSS3

一些样式：

（1）颜色：rgba()

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

（2）圆角：border-radius

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

（3）盒子阴影：box-shadow

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

（4）文字阴影：text-shadow

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

（5）运动：transition

transition: duration style-type easing;
transition:时间 all  ease

（6）变形：transform

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

（7）线性渐变：linear-gradient

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

（8）径向渐变：radial-gradient

        radial-gradient(color1, color2);

五、浏览器前缀

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

爱我吗