HTML5-Day4
1.线性渐变：
添加渐变：渐变不是一个单一色，它产生的是图像，所以需要使用background
e.g linear-gradient（方向，开始颜色 位置，颜色2 位置，颜色3 位置。。。）；
background：linear-gradient（to right，red 0%，red 50%，blue 100%）；
径向渐变：从一个中心点向作为扩展的渐变效果
background：radial-gradient（形状 大小 坐标 ）
形状shape: circle：正圆；ellipse：适配当前的形状
at position:坐标，默认是正中心
background：radial-gradient（at 50px 50px，red，blue）
大小size：closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角；（默认是最远的角）
background：radial-gradient（circle farthest-side at 50px 50px，red，blue ）；
重复渐变：
background：repeating-radial-gradient（cicle closest- side at center center，#fff 0%，#fff 10%，#000 10%，#000 20%）；
2.背景background
background-color
background-image：
（1）如果图片大于容器，那么会默认从容器左上角开始放置
（2）如果图片小于容器会平铺，
round：会将图片进行缩放再放置
space：图片不会缩放平铺，只是在图片之间产生相同的间距值
（3）设置在滚动容器的背景的行为
fixed：背景图片的 位置固定不变
scroll：当滚动容器的时候，背景图片会跟随滚动
local：和scroll的区别：前提是滚动当前容器的内容
local：当内容大于容器的时候，会有滚动条，可以滚动内容
background-size：
length：（宽度/高度或auto）
注意点：设置的百分比是参照父容器可放置内容分 百分比
contain：按比例调整比例的大小，让图片的 宽高自适应整个元素的背景区域，使图片全部包含在容器内
cover：背景图片按比例缩放自适应整个背景区域，是图片全部包含在容器中
e.g将大长图放置在小容器中，显示中间重要部分，当图片缩放时能显示其他内容
如图示
background：url（。。。）；
background-size：cover：
background-position：center；
设置背景坐标原点：默认在容器的左上角
background-origin：
border-box：从border的位置开始填充背景，会与border重叠
padding-box：从padding的位置开始填充背景，会与 padding重叠
content-box：从内容的位置开始填充背景
e.g background-origin：content-box
设置内容裁切
background-clip：content-box；
3.边框图片：
4.过渡
transition-property：添加过渡效果的样式属性名称
transition-property：left；
transition-duration：过渡效果的耗时，以秒为单位
transition-timing-function：linear（匀速）
简写：transition：属性名称 过渡时间 时间函数 延迟
transition：left 2s linear 0s；
多个演示同时添加过渡效果：
transition：left 2s linear 0s ，background-color 5s linear 0s；
为所有样式添加过渡效果：
（1）所有的样式都一样
（2）效率低下
（3）建议不使用
（4）steps：跳跃效果
transition：all 2s （steps）；
单击：
div：active{
left：1000px；
}
手风琴菜单：
注意点：添加过渡效果的时候，只能产生从某个值到另外一个具体的值的过渡，比如width，height。。。
一定要设置是哪些css样式添加 了效果
transition-property：height；
一定要设置过渡效果的耗时
transition-duration:1s；
.item > .itemBox{width:100%;
height:0px;
overflow:hidden;
transition-property:height;
transition-duration:1s;}
.item:hover>.itemBox{height:110px;}
5.transform:转换
缩放：scole
（1）只有一个参数，就代表x'和y方向都缩放相同比例
（2）如果有两个参数，就代表x，y方向
二维旋转：rotate
正值：顺时针 负值：逆时针
e.g div：nth-of-type（3）：active{
transform:rotate(30deg);}
斜切：skew
单个方向（x）或者两个方向（x，y）
e.g div：nth-of-type（4）：active{
transform:skew(30deg);}
注意点：如果当角度是正式，则往当前轴的负方向斜切
斜切
改变旋转轴心
transform-origin
添加多个transform属性值
既能旋转又能移动：transform：translateX（700px） rotate（-900deg）；（建议先移动再旋转）
元素居中（div的居中）
1.设置position：absolute；
left：50%；
top：50%；
！！position定位的百分比是参照父容器的宽高
2.使用transform居中
transform：translate（-50%，-50%）；
！！transform设置的百分比是参照本身的宽高
3D移动
transform：translate3d（x，y，z）
缩放：
transform：scale3d（x，y，z）
