HTML5/CSS3
HTML5是HTML的升级、CSS3是CSS的升级
选择器
document.querySelector();
document.querySelectorAll();
自定义属性
data-xxxh；
oEle.dataset-xxx;
class操作
oEle.classList
length长度
value所有的class
操作
.add（） 添加
.remove（）删除
.contains（）包含
toggle（）切换
比css2 新增加一些样式
1 rgba(red[0-255],green[0-255],blue[0-255],alpha[0-1]);
2border-radius px % em rem;
（1）个值 左上右上右下左下
（2）个值左上右下---右上左下
（3）个值左上---右上左下---右下
（4）个值左上---右上---右下---左下
浏览器前缀
-webkit- chrome | Firefox（49+）| opear | Safari | WebkitBorder
-moz- Firefox MozBorder
-ms-IE msBorder
-o-opear OBorder
无w3c规定
阴影
盒子阴影
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；
运动 transition：duration style-type easing;
变形
translate(x,y); 平移
rotate(deg,deg); 旋转
scale(倍数，倍数)； 缩放
设置原心位置
transform-origin:x y;
线性渐变
linear gradient(color1,color2);
linear gradient(deg,color,color2);
linear gradient(deg, color1 start, color1 end,)
跳变
repeating-linear gradient(color1 start, color1 end...)
径向渐变
radial-gradient(color1,color2);
背景
background-size:
文本切片
1.给元素设置渐变背景
2.设置文本切片
-webkit-background-clip: text;
3.文字透明
