背景图片的调节,可以直接用属性调整背景图片的大小：background-size:contain是宽高缩放，直到某一边到底为止
background-size:cover是缩放图片，有可能某一边会出盒子
设置背景图片的开始位置background-origin:border-box 从边框开始
background-origin:padding-box 从边框内部开始
background-origin:content-box 从内容区域开始
设置背景图片的裁切 background-clip:border-box 从边框开始
background-clip:padding-box 从边框内部开始
background-clip:content-box 从内容区域开始
背景图片设置时，设置位置和大小用/分隔开
background:url('xxxxx.jpg') no-repeat center center/cover;
设置 body html 跟浏览器一样高
body默认是一个 div 会根据 子元素的高度 被顶大
body,html{
height: 100%;
}
transition过渡
transform是一个属性，也可以被transition使用，transition:transform 1s;/////transform最主要的有三个方法transform:translate(x,y);xy是指移动长度/////transform:scale(x,y);xy是指缩放倍数，都为0时表示隐藏？//// rotate(180deg);里面只写角度
transition-property:width;表示过渡的属性
transition-duration:1s;表示持续时间
transition-delay:1s;表示延迟时间，一般用于设置先后动画，写前面动画执行的时间
transition-timing-function:linear;动画的播放线性，可以在贝塞尔网站设置具体数值http://cubic-bezier.com/
举例：transition:width 1s,
height 1s 1s linear;
transform-origin: center;变换的中心点,默认是元素的正中心,可以修改为 任意的位置
transform-style: preserve-3d; 如果 有3d方向的 改变, 需要为父容器 添加该属性 才能够看到 3d效果
3D比2D多了Z轴，方向是浏览器往外，可以参考左手准则来判断3D中的方向
transform: rotateZ() rotateX() rotateY();
transform: translateX()translateY() translateZ();
transform: scaleX() scaleY() scaleZ();
perspective: 1000px; 设置元素距离浏览器的长短，设置的位置是祖先容器，距离越小3D效果越明显，不过到75px的时候看不到元素
animation-name: autoMove;名字
animation-duration: 1s;持续时间
animation-iteration-count: infinite;次数 可以给具体的数字 infinite 无限
animation-timing-function: linear;跟过渡的 取值 一模一样 也能够设置贝塞尔曲线
渐变
线性渐变
参数1 渐变的方向 可以设置为方向 to top left 或者 具体的角度 45deg
参数2颜色1
参数3颜色2
background-image: linear-gradient(to left top,skyblue,orange);
background-image: linear-gradient(45deg,skyblue,orange);
background-image: linear-gradient(to left,yellow,orange);
径向渐变
参数1 渐变的半径 如果 两个值一样 圆形 否则是椭圆(如果是圆形 给一个值即可)
通过attop left 可以设定 渐变的位置
参数2 颜色1
参数3 颜色2
参数4 也是支持 添加多个颜色的
谷歌浏览器不支持过渡 效果,ie支持
background-image: radial-gradient(300px 300px at center,orange 10%,skyblue 10%,orange,yellow,red,black);
background-image: radial-gradient(100px at top left,yellow,orange);
图片边框
border-image-source: url('xxx.jpg');
border-image-slice: 100 100; 切割的距离
border-image-repeat: round; 中间 平铺的方式
定义动画用@keyframes auto Move{
from{}如果不写，使用默认值
to{}
10%{}从0开始到设置值
50%{}
100%{}
}