CSS3 新特性

1-弹性盒模型

box-orient:(vertical/horizontal)
box-direction:(normal正序 / reverse 倒序)
box-ordinal-group(Number) //设置元素的具体位置/ 可结合nth-of-type() 使用 随意排列位置

box-flex：Number 定义盒子的大弹性空间
子元素的尺寸 = 盒子的尺寸* 子元素的box-flex 属性值/所有子元素的box-flex 属性的和
box-pack 对盒子的空间进行管理
start
end
center
justify 富余空间子元素之间平均分布

（前面加前缀）

box-shadow:盒模型阴影
参数：【】 x y 模糊值（扩展半径模糊）颜色
第一个可选参数【inset】内投影
box-reflect:倒影
参数：
- direction :方向 above （顶部）| below（底部） | left | right
- 距离
- 渐变（可选）
resize 自由缩放
- (注意:一定要配合overflow:auto 一同使用)
- Both | horizontal | vertical
box-sizing 盒模型解析模式
- content-box : 标准盒模型默认
- width/height=border + padding+content
- Border-box 怪异盒模型 width/height = content

（前面加前缀）

CSS3 分栏布局
- column-width 栏目宽度
- column-count 栏目列数
- column-gap 栏目距离
- column-rule 栏目间隔线
link 标签中（不兼容IE 6,7,8）

   media = 'screen and （min-width：800px）'800px 以上使用

   media = 'screen and （max-width：600px）'600px 以下使用

横屏和竖屏

   media ='all and  (orientatino:portrait )' 竖向
   media = 'all and (orientatino:landscape)'  横向

 @media screen and (min-width：800px) {  }
 @media screen and (max-width：400px) {  }

 @import url("style.css") screen and(min-width:400px) and (max-width：800px){   }

@import 指令来引入外部样式表。这是一个过时的方法，它会阻止浏览并行下载。link 标签才是最好的选择，它也能提高网站的前端性能。通过 link 标签请求加载的外部样式表不会阻止并行下载

border-radius：（1-4）x轴/y轴（1-4） (椭圆)
不给 / ,x轴和y轴一样
- border-image: ( 花瓣案例)
- 参数:
  - url()
  - 向内偏移（切割图片）
  - 边框的宽度
  - 超出边框的量
  - 平铺(repeated)/铺满(rounded)/拉伸(stretched)
- 默认为 none 100% 1 0 stretch
- ie不支持 border-image 属性
border-colors 多种颜色火狐下才支持
线性渐变：linear-gradient: （加前缀）
- left top red blue…
- 30deg red blue …
- left top red 80px blue 100px…
- left top red 0 blue 50%…
repeating-linear-gradient 斑马线（进度条案例）
- 光斑的移动结合 background-position
ie 9不兼容，使用 filter
radial-gradient 【起点】【形状】||【大小】, 点 ,点…
形状：ellipse circle
大小：具体值或者百分比可以是关键字
最近端 closet-side
最近角 closet-corner
最远端 farthest-side
最远角 farthest-corner
包含或覆盖 contain or cover

firefox 目前只支持关键字
多背景
逗号隔开

   background:url(xx.jpg) 0 0, url(yy.jpg) 0 100%

背景尺寸
background-size： x y /(100% 100%)
cover 放大
contain 缩小 ,(第一张图) ,（第二张图）
background-origin:
border-box: 从border区域开始显示背景
padding-box: 从padding区域开始显示背景
content-box: 从content区域开始显示背景
background-clip: （ iphone 开机键光斑的移动效果）

border：从border区域向外裁剪背景
padding: 从padding区域向外裁剪背景
content:. 从content区域向外裁剪背景
no-clip : 从border区域向外裁剪背景
text : 只给文字加背景 -webkit 内核下才支持