1，css3新特性有哪些？
（1）css3边框
border-radius：css3圆角边框。
box-shadow：边框阴影。box-shadow:10px 10px 5px #888888;
box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset（内阴影）;
border-image:边框图片。border-image：url(border.png) 30 30 round;
（2）css3背景（默认情况下，背景颜色从padding开始排放）
1， background-origin：属性规定background-position属性相对于什么位置来定位（即原点）。（对背景图才有用）
background-origin：content-box（从内容开始）/padding-box（从padding开始）/border-box（从边框开始）
2， background-size：改变背景图片的大小
属性值有：auto（图片原来的值，默认值）/
number(200px)可能让图片变形/
percentage : value% value%(根据盒子的宽高来定)
cover（图片没有盒子大时，设置cover可使图片完全覆盖盒子，但是图片不能完全显示，一般配合background-position：center；去使用）
contain（包含，可能出现空白区域）
3，background-clip 裁剪，设置背景显示在哪个区域
取值：border-box：显示content，padding，border区域
padding-box：显示在padding、content区域
content-box：显示在content区域。
（3）css3文字效果
1， 文本阴影text-shadow ： 2px（水平，可为负数） 3px（垂直，可为负数） 2px（模糊距离，不能为负数） red；
2， 文本描边 -webkit-text-stroke：宽度 颜色；一定要加上-webkit-前缀
3， 溢出省略 text-overflow：ellipse（省略号）；要和overflow：hidden；white-space：nowrap使用。
4，文本排版 dirction
ltr(left to right 从左到右)
rtl（right to left 从右到左），一定要配合 unicode-bidi: bidi-override; */
direction: rtl;
unicode-bidi: bidi-override;
（4）css3 2D转换
transform：对元素进行移动、缩放、转动、拉伸或拉长。
translate（）：元素从当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数；
transform：translate（50px，100px）；
把元素从左侧移动50像素，从顶端移动100像素。
rotate（）：元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转。
transform：rotate（30deg）
scale（）：元素尺寸会增加或减少。倍数
根据给定的宽度（x轴）和高度（y轴）
transform：scale（2,4）
把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。
skew（）：元素转动给定的角度，（水平线和垂直线）
根据给定的水平线（x轴）和垂直线（y轴）
transform：skew（30deg，20deg）
围绕x轴把元素转动30度，围绕y轴转动20度。
（5）css3 3D转换
rotateX（）：元素围绕其X轴以给定的度数进行旋转。
transform：rotateX（120deg）
rotateY（）：元素围绕其Y轴以给定的度数进行旋转。
transform：容他特Y（120deg）；
（6）颜色的表示方法：
十六进制 ： 000 fff ff0000
英文单词
rgba（red（0-360），green（0-255），blue（0-255），alpha（0-1））
颜色的值越大，则越亮，透明的值越大，越不透明。
hsla（色调（0-360），饱和度（0%-100%），亮度（0%-100%），透明度（0-1））
background：rgba（255,0,0,0.4）；
background：hsla（200,0%，50%，0）；
opacity：0；
（7）盒子模型
box-sizing：表示你设置的宽高从什么位置去设置
1，border-box：对象的实际宽度就等于设置的width值，即使定义,有border和padding。
2，content-border：对象的实际宽度等于设置的width值和border，padding之和
（8）css3渐变
1，background：linear-gradient（direction，color1，color2，。。。。）
direction取值：to left（从右向左） to right（从左到右） to top （从下往上）to bottom（从上往下，默认值） to left bottom （左下角）to left top（左上角） to right top（右上角） to right bottom（右下角）
角度：单位为deg
2，径向渐变（一点向四周渐变）
background：-webkit-radial-gradient（center，shape，size，startcolor，。。。。lastcolor）
center 渐变起点的位置，可以是百分比（注意要设两个值）
shape 渐变形状 ellipse表示椭圆（默认），circle表示圆形
size 渐变的大小，即到哪里为止。closest-side 最近边
farthest-side 最远边 closest-corner 最近角 farthest-corner最远角
（9）css3过渡
transition：
取值：transition-property：all，height，width
transition-duration：3s；（过渡时间）
transition-delay：1s；（定义transition效果开始的时候）
transition-timing-function：（指定transition效果的转速曲线）
取值：ease；开始快，后面越来越慢
ease-in：开始慢，后面越来越快
ease-out：减速运动；
ease-in-out：先加速后减速
总写：transition：property duration delay timing-function
transition：all 3s linear；
（10）在CSS3中唯一引入的伪元素是::selection.
使被选中的文本成为红色：
::selection { color:#ff0000; }::-moz-selection （Firefox 支持替代的 ::-moz-selection。） { color:#ff0000; }
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
（11）媒体查询@media
（12） 多栏布局
考虑浏览器兼容性：
-webkit-column-width
-moz-column-width
-o-column-width
-ms-column-width
-webkit-column-count：3；
-webkit-column-rule：1px solid #000；
-webkit-column-gap：2em；
column-count：表示布局几列；
column-rule：表示列与列之间间隔条的样式；
column-gap：表示列与列之间的间隔。