选择器
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.行元素有问题(不能操作行元素)
