行间容器html,CSS3

(相对于css增加的内容)

1.动画(animation)

1 @keyframes 规定动画，后边跟动画名称，再接大括号内的各种属性；2 animation 所有动画属性合集；3 animation-name 名称；调用一个动画时指定的动画格式来源名称；4 animation-duration 动画时间；5 animation-timing-function 　 动画速度曲线；值：linear(速度一直相同),ease(首尾慢，中间快),ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义；6 animation-delay 动画延期开始时间；7 animation-iteration-count 播放次数，默认为1；8 animation-direction 动画是否在下一周期逆向播放；值：normal,reverse(反向播放),alternate(奇正偶反),alternate-reverse(奇反偶正),initial,inherit;9 animation-play-state 　 动画状态，值:running(默认),paused(暂停)；

2.渐变(gradients)

让使用颜色的地方在两个或多个指定颜色之间平稳过渡，css3有线性和径向渐变两种；

1 (color1,color2) 　　　　　默认从上到下的渐变，例：background:(red,yellow);2 (to right,color1,color2) 　 　　　　　　 从左到右，火狐和opera浏览器的可以省略to,webkit浏览器的使用left,下同；3 (to left,color1,color2) 　　　　 从右到左；4 (to bottom,color1,color2) 　　　　 从上到下；5 (to top,color1,color2) 　　　　　从下到上；6 (to bottom right,color1,color2) 　　　　 从左上角到右下角；7 linear-gradient(90deg,color1,color2)　　　　 按角度渐变，新标准是我们数学的角度标准，老的则是按相反方向走角度的，如90新标准表示从下到上，旧标准为从上到下；8 (color1,color2,color3) 　　　　 依次多个颜色的渐变，方向角度等的用法同上；9 repeating-linear-gradient(color1,color2 10%) 重复线性渐变；10 radial-gradient(color1,color2) 　　　　　从内到外均匀径向渐变；当颜色后加上百分比时，则是按比例渐变，所有颜色比例和不一定要等于100%；11 radial-gradient(circle,color1,color2)　　　　 设定形状渐变，默认是ellipse(椭圆)12 repeating-radial-gradient(color1,color2 20%) 重复径向渐变；

3.2D转换属性transform的值

1 translate(x,y) 平移给定距离的位置；例：transform: translate(50px,100px);2 rotate(angle) 旋转一个角度，值为deg单位数值，可以为负数，即逆时针旋转；3 scale(x,y) 缩放，值为原来的倍数；4 skew(angle,angle2) x,y方向上倾斜(不是旋转),第二个值可以省略，默认为0；5 matrix() 以上属性合集，包含六个值，依次为：旋转，绽放，平移，倾斜；

4.3D转换

1 transform 2D转换的值都可使用，还增加了rotateX()绕X轴旋转，和rotateY()绕Y轴旋转，rotateZ()，perspective()透视，2 transform-origin 　 更改转换元素位置；3 transform-style 值：flat(2D平面呈现),preserve-3d(3D空间呈现)4 perspective 透视，值为px距离，或none;5 perspective-origin 定义子元素的透视；6 backface-visibility 定义当前元素不面向屏幕时是否可见，值：visible,hidden;

5.过渡

1 transition-property 显示过度的属性，值：none,all,指定css属性名以逗号分隔；2 transition-duration 过渡时间，值为时间，一般为秒(s);3 transition-timing-function 速度曲线，值：linear(速度一直相同),ease(首尾慢，中间快),ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义；4 transition-dilay 延迟时间；5 transition                    过渡属性合集；

6.多列(column)

1 column-count 　　元素被分割的列数；2 column-fill 列填充方式；值：balance短平衡，auto3 column-gap 列间距；4 column-ruls 两列间边框样式合集；5 column-rule-color 颜色；值为css颜色；6 column-rule-style 样式；值：none,hidden,dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)；7 column-rule-width 宽度；值：thin,medium,thick,长度单位值；8 column-span 元素要跨越的列数；9 column-width 　　 列宽；10 columns column-width和column-count的合集；

7.弹性盒子

1 display none(不显示),block,inline(默认),inline-block,list-item,run-in,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-colummn,table-cell,table-caption,inherit;2 flex-direction 弹性容器在子元素排列方式，值：row(默认),row-reverse,column,column-reverse;initial,inherit;3 justify-content 弹性盒子元素在主横轴方向对齐方式；值：flex-start(默认位于开头),flex-end,center,space-between(项目位于各行间留有空白的容器内),space-around,initial,inherit4 align-items 弹性盒子内子元素在纵轴方向对齐方式：值:stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit;5 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。值：nowrap(默认),wrap(换),wrap-reverse,initial,inherit;6 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐;值：stretch,center,flex-start,flex-end,space-between,space-around,initial,inherit;7 flex-flow flex-direction和flex-wrap合集；8 order 弹性盒子子元素排列顺序，值为数字，默认0；9 align-self 在弹性子元素上使用，覆盖容器的align-item属性，值：stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit;10 flex 设置弹性盒子子元素空间分配方式，值：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

8.其他新特性

1 appearance 定义一个元素的外观为指定样式，值：normal,icon(小图片样式),window(窗口),button,menu,field(输入字段样式);2 box-sizing 允许你以某种方式定义某些元素，以适应指定区域。值：content-box(默认),border-box,inherit;3 icon 将元素设置为图标等价物,值为auto,URL(如有多个图标，对逗号分隔);4 outline-offset 外轮廓修饰并绘制超出边框的边缘;5 resize 元素可由用户调整大小的部分；值:none,both,horizontal(宽度),vertical(高度);

**使用css制作按钮

1 .button{

2 background-color:#4CAF50; /*Green*/

3 border:none;

4 color:white;

5 padding:15px 32px;

6 text-align:center;

7 text-decoration:none;

8 display:inline-block;

9 font-size:16px;

10 }