CSS3新特性（一）

一、CSS3是CSS2的升级版本，在CSS2.1的基础上增加了很多强大的功能。

新特性：

1、强大的CSS3选择器

2、抛弃图片的视觉效果，圆角、阴影、渐变、半透明、图片边框，可以通过CSS3实现

3、新增背景功能

4、盒子模型的变化

5、阴影效果

6、多列布局与弹性盒模型布局

7、Web字体与WebFont图标

8、颜色与透明

9、圆角与边框

10、CSS变形

11、CSS过渡与动画交互

12、媒体特性与Response布局

二、盒子模型

1、box-sizing 定义盒子模型的尺寸   

值：content-box(默认)/border-box

如果值设为border-box,此时设的高宽即为真实的高宽，包括边框和内边距的高宽。

2、resize 是否允许用户缩放，调节元素尺寸大小

值：none/both/horizontal/vertical

要加上一句overflow:auto

3、outline 给元素周围绘制一条轮廓线      

outline-width外廓线宽度

outline-style外廓线风格

outline-color外廓线颜色

outline-offset外廓线的偏移量

4、display 设置盒子如何显示的，值：

none隐藏对象

inline指定元素为内联元素

block指定对象为块元素

table指定对象作为块元素的表格，类同于html标签<table>

....

三、CSS3颜色

1、透明

opacity 检索或设置对象的不透明度，对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

值：<number>使用浮点数指定对象的不透明度。值在0-1之间

IE兼容：filter:alpha(opacity=透明值)

2、CSS3颜色模式

（1）rgba(number,number,number,0-1之间的小数)也可以设置颜色的透明度

（2）transform透明

（3）HSL

四、CSS3渐变 渐变就相当于背景图片

1、线性渐变

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

<angle>： 用角度值指定渐变的方向（或角度）。 

to left： 设置渐变为从右到左。相当于: 270deg 

to right： 设置渐变从左到右。相当于: 90deg 

to top： 设置渐变从下到上。相当于: 0deg 

to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <color-stop> 用于指定渐变的起止颜色：

<color>： 指定颜色。 

<length>： 用长度值指定起止色位置。不允许负值 

<percentage>： 用百分比指定起止色位置。

渐变一般应用于需要指定颜色的地方。

代码：

  background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);

               /*0度角方向（从下向上）*/

background: linear-gradient(to top left,#000,#fff);

                /*从右下到左上的渐变*/

2、径向渐变

radial-gradient(shape,size,position,<color-stop>)