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.文字透明