01-线性渐变
background:linear-gradient(to top left,red 0%,red 30%,blue 50%,blue 100%);
linear-gradient参数
第一个参数：渐变的方向或者角度第二个参数第三个参数第四个参数…渐变的颜色值和渐变的百分比
02-径向渐变
background: radial-gradient(shape size at position,color,color);
position 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即centershape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-cornercolor ：指定颜色
03-背景样式（上）
background-repeat
round：能够将平铺的背景图完整的显示在容器内部，所以也就会将背景图进行缩放space：能够将平铺的背景图完整的显示在容器内部，但是会产生相同的间距 background-attachment
fixed 相对于整个文档来说，背景图是固定的 相对于容器来说，背景图也是固定的scroll 相对于整个文档来说，是随着滚动条变化的 相对于容器来说，是固定的local 相对于整个文档来说，是随着滚动条变化的 相对于容器，是随着滚动条变化的
04-background-size
background-size
300px：设置的宽度300，高度auto
300px 500px：第一个参数是设置宽度，第二个设置高度
50% 50%：参照与当前容器的宽和高
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。（使背景图片缩放至容器刚好填满）–主要针对于容器，让容器刚好填满
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（使其背景图片刚好的放在容器内部））–主要针对于背景图片，让背景图片刚好放在容器内部
05-背景的填充和裁剪
背景图的默认原点，如果有padding，原点就基于padding的，如果没有padding，默认原点基于内容的
background-origin
border-box：设置背景图的原点以边框的左上角为原点padding-box：设置背景图的原点以内间距的左上角为原点content-box：设置背景图的原点以内容的左上角为原点 background-clip
border-box：以边框进行裁剪，边框以外的被裁减掉padding-box：以内间距进行裁剪，内间距以外的被裁减掉content-box：以内容进行裁剪，内容以外的被裁减掉
06-过渡
transition-property:添加过渡效果的样式属性名称transition-duration：过渡效果的耗时transition-timing-function：设置时间函数–控制运动的速度 linear 匀速，ease-in-out,由慢到快transition-delay：设置动画的延迟效果transition：left 2s linear 0s；
第一个参数设置样式属性名称第二个参数过渡效果的耗时第三个参数控制运动的速度第四个参数设置动画的延迟 如果想设置多个过度，可以利用逗号隔开即可transition: all 2s ease-in-out 0s; 代表设置所有的属性都会有过渡效果
07-二维变换
transform中translate的设置 translate能够让当前的元素进行移动，移动的距离是当前本身位置的左上角进行移动
transform: translate(100px); 如果只写了一个参数，代表设置的x位移transform: translate(400px,500px); 如果写了两个参数，第一个代表x轴的位移，第二个代表y轴的位移transform:translateX(300px); 只针对x轴的位移transform:translateY(300px);只针对y轴的位移 transform中scale的设置 如果值为1，就是默认状态，大于1放大，小于缩小
transform:scale(2);如果只有一个参数，代表设置x,y进行缩放transform: scale(2,1); 如果设置两个参数，第一个代表x缩放，第二个参数代表y轴的缩放transform:scaleX(2); 代表设置x轴的缩放transform:scaleY(2);代表设置Y轴的缩放 transform中 rotate的设置
transform:rotate(90deg); 默认是沿着Z轴旋转transform:rotateX(90deg); 沿着X轴进行旋转（单双杠）transform:rotateY(90deg); 沿着Y轴进行旋转（双手握着 钢管 围着钢管转 ） transform中skew的设置(作为了解)
transform:skew(60deg);代表x轴倾斜60degtransform:skewX(60deg);代表x轴倾斜60degtransform:skewY(60deg);代表Y轴倾斜60deg transform中origin的设置 设置盒子的轴心点；
transform-origin: right top;transform-origin: 50px 50px;
08-同时添加多个transform属性
transform:translateX(700px) rotate(-90deg);
*注意点：如果是写多个属性的话，把旋转的放在最后，因为旋转属性会将坐标系进行旋转
盾牌案例步骤
先将图片结构书写好，只要给父盒子设置一个宽度即可利用transform将图片的位置和角度进行打乱鼠标经过的时候讲transform属性清空transform：none给图片加过度效果
09-实现任意元素居中
实现任意元素的居中
定位设置left：50%；top：50%； transform:translate(-50%,-50%);定位的百分比：相对于父容器，translate的百分比相对于本身
10-3d
