CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变：

 

参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

（单击图片可放大）

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图：

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：

color：rgba(R,G,B,A)

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

代码示例：

background-color:rgba(100,120,60,0.5);

CSS3边框  为边框应用图片 border-image

顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景图片复杂一些。

想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。 可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，是不是像传说中的九宫图，如下：

我们把上图当作边框图片 来应用一下， 看一看是什么效果

根据border-image的语法：

#border-image{    background:#F4FFFA;    width:210px; height:210px; border:70px solid #ddd;    border-image:url(borderimg.png) 70 repeat   }

效果：

从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的，下图的样子：  repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：

边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。

Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；

#border-image {      width:170px;      height:170px;      border:70px solid;      border-image:url(borderimg.png) 70 round;  }

效果：

可见图片被压扁了。

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。

border-image:url(borderimg.png) 70 stretch

看一下效果：

2,4,6,8分别被拉伸显示。

注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

Firefox 26.0 下是可以准确区分的。

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

浏览器的支持情况：

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

111

CSS3边框  阴影 box-shadow（一）

box-shadow是向盒子添加阴影。支持添加一个或者多个。

很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

参数介绍：

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

为元素设置外阴影：

示例代码：

.box_shadow{   box-shadow:4px 2px 6px #333333;  }

效果：

为元素设置内阴影：

示例代码：

.box_shadow{   box-shadow:4px 2px 6px #333333 inset;  }

效果：

添加多个阴影：

以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

.box_shadow{     box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

CSS3边框  圆角效果 border-radius

 border-radius是向元素添加圆角边框。

使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{     height:50px;/*是width的一半*/     width:100px;     background:#9da;     border-radius:50px 50px 0 0;/*半径至少设置为height的值*/     }

实心圆：
方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

div{     height:100px;/*与width设置一致*/     width:100px;     background:#9da;     border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/     }

.nav li:last-child{  

         background:none;   

}

background:linear-gradient(to top,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 

这个练习题有意思哈哈哈

responsive design响应式设计： 是为了解决用户终端设备适配，在不同分辨率下展示不同的排版样式 一般响应式页面设置需要三个条件： 流体网格、响应式图片、媒体查询 流体网格-根据用户终端屏幕大小，利用百分比分布盒子大小 响应式图片-可以设置img:max-width大小 针对不同设备设计多张响应式图片显隐控制图片的引入 媒体查询-根据设备尺寸大小，加载控制样式

data-是自定义属性的写法，后面接你的属性名字，例如data-src-600px，data-laowang img[data-src-600px]是用css选择包含自定义属性值[data-src-600px]的img标签 content表示生成文本 它里面的attr content：attr（data-src-800px，url），表示获取自定义属性（左边的）的值（右边的）

box-sizing:content-box/border-box/padding-box;三种盒子模型的区别： 1）content-box：就是传统的盒子模型，盒子的width只是元素内容的宽，不包括padding、border； 2）border-box：盒子的width包括元素内容宽、padding、border值； 3）padding-box：盒子的width包括元素内容的宽、padding值

none: 初始状态、动画第一帧、动画最后一帧、初始状态； forwards:初始状态、动画第一帧、动画最后一帧； backwards:动画第一帧、动画最后一帧、初始状态； both:动画第一帧、动画最后一帧；