h5中的新样式

设置背景图片大小
background-size: length|percentage|cover|contain;
length 设置背景图像的高度和宽度。
percentage 以父元素的百分比来设置背景图像的宽度和高度。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

背景被裁剪区域
background-clip:
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
text 背景被裁剪到文本样式

背景图片的定位起点
background-origin
content-box 背景图片相对于内容定位
padding-box 背景图片相对于内边距定位
border-box 背景图片相对于边框定位

多背景
background:url(路径),url(路径),url(路径)

线性渐变
background:-webkit-linear-gradient(deg,red 25%,green 25%);
颜色 位置
deg多少度 也可以不写

径向渐变
background: -webkit-radial-gradient(circle,yellow 50px,red 50px);
颜色 位置
ellipse(椭圆)
circle(圆形)

重复线性渐变
background:-webkit-repeating-linear-gradient(-45deg,red 0px,red 10px,green 10px,green 20px);

颜色
transparent 透明

边框如何设置圆形
border-radius：50% 圆形

伪类选择器
nth-child()
nth-of-type()

带透明的颜色
rgba(0,0,0,0) 最后一个为透明度 0-1

新事件
ontimeupdate 当前位置发生改变时
onended 当播放结束时

设置倒影
-webkit-box-reflect: below 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
方向 距离 可加样式
below下面 above上面 left左边 right右边

动画效果
定义动画
@keyframes 动画名{
    0%/from{
    
    }
    100%/to{

    }
}
动画的调用
animation: 8s   test    linear     infinite;

      时间 动画名   运动样式   无限次

滤镜
-webkit-filter: blur(20px);
数值越大越模糊

蒙版(遮罩层)
-webkit-mask:url("2.png") no-repeat; 引一个png图片
-webkit-mask-position: 300px 300px; 给png图片定位

背景阴影
box-shadow:10px 10px 10px #000;
box-shadow:x y blur #000; blur：模糊程度 数值越大越模糊

如何测试性能:
console.time(''); 参数名需要一致,必须要传参数
console.timeEnd(''); 参数名需要一致,必须要传参数

h5自定义属性：
setAttribute
getAttribute

data-前缀+属性名 浏览器不会过滤
dataset是一个json（推荐用这个）
dataset获取所有data-属性