4.3

opacity: 0-1;（从无到有）支持过渡属性，因为display:block属性不支持过渡，所以可用来隐藏需要过渡属性。
很多css属性，最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性支持，主流浏览器提供属于自己的语法规则“浏览器前缀”
-webkit-:谷歌、苹果、浏览器前缀
-moz-:   火狐浏览器前缀
-ms-:     IE浏览器前缀
-o-:        o鹏浏览器
渐变：背景色在多个颜色之间平稳过渡
一：线性渐变：从一个方向到另一个方向的颜色的变化
1.标准模式的语法（不添加浏览器的前缀）：
bachground:linear-gradient(direction,color-stop1,color-stop2,...);
说明：direction:默认为to bottom(到哪个方向),即从上到下渐变；stop:颜色的分布位置
2.兼容模式的语法（添加浏览器前缀）：
background:-webkit-linear-gradient(direction,color-stop1,color-stop2,...);
说明direction:不能加to，默认是从哪个方向开始
例如 backgroung:-webkit-linear-gradient(right,red 20%;yello 30%);
线性渐变的颜色分布：
linear-gradient(方向，颜色1 20%，颜色2 30%)
到20%的位置一直是颜色1的渐变，处了20%开始向颜色2渐变
渐变方向：
1、to left  to right  to top
2、对角渐变：to left top  ; to right bottom
3、渐变线角度的变化
例如：标准模式：40deg(40度)  兼容模式：50deg(相反的角度：90-40)
二：径向渐变：从一个点到四周的颜色过渡变化。
语法：（必须添加浏览器前缀）
background:radial-gradient(center,shape,size,star-color,last-color);
说明：
center:渐变起点的位置，可以为百分比，默认是图形的正中心
shape：渐变的形状，ellipse:椭圆 circle:正圆，默认为ellipse,若元素为正方形时，两种圆形显示一样
size:渐变的大小。即渐变到哪里停止，有四个值：
closest-side:最近边
farthest-side:最远边
closest-corner:最近角
farthest-corner:最远角

重复性线性渐变：
background:-webkit-repeating-linear-gradient();
重复性径向渐变
background:-webkit-repeating-radial-gradient();
过渡：（添加在元素上面，不要加在hover上面）
1.transition-property；(检索参与过度的属性)，默认的是all,全部过度。
2.transition-duration;完成过渡的时间
3.transition-delay；延迟过渡的时间
4.transition-timing-function: linear/ease(匀速/逐渐变慢)。默认的是ease
简写：transition:width 1s 2s linear/ease(匀速/逐渐变慢)
transition:过渡的属性（all）过渡的时间 延迟时间 动画类型
注：transition必须通过事件触发！（鼠标滑过），改变css属性值

1.#banner要加上属性：overflow-x:hidden;以适应不同的分辨率。