前言：以下并不包含CSS所有内容！

一、美妙的CSS3字体和特效

√多变的盒子

1.透明：生成部分的图片和颜色是CSS3的一个基本功能。实现透明效果的方法有两种：

第一种是使用rgba()函数，它接收4个数值作为参数。前三个值分别代表色彩中的红、绿、蓝分量，取值范围为0-255.最后一个值alpha(不透明度)值，取值范围为0-1；0表示完全透明，1表示完全不透明。

//示例
.semitransparentBox{
        backgroud:rgba(170,240,0,0.5);
}

第二种是新增的名为opacity的属性，这个属性的原理与alpha值一样（opacity这个单词的意思就是“不透明”）:取值范围为0-1；0表示完全透明，1表示完全不透明。

//示例
.semitransparentBox{
  backgroud:rgb(170,240,0);  
  opacity:0.5;       
}

 

注意： 在下列情况下，建议使用opacity属性而不是rgb()函数

◊实现那个多种颜色（元素）的半透明效果。使用opacity属性，不仅背景颜色，就连文本颜色、边框颜色也会变透明。

◊在不知道颜色的情况下，实现半透明效果(比如，通过其他样式表或者JavaScript代码来设置半透明效果）。

◊实现图片的透明效果。

◊实现渐变动画效果时，比如元素的淡入淡出。

2.圆角：使用border-radius属性

3.背景

4.阴影

5.渐变

√创建过度效果

1.基本的颜色过渡

2.更多过渡思路

3.用JavaScript过渡

4.变换

5.web字体

二、CSS3与响应式Web设计（媒体查询）

√响应式设计基础

1.流式布局（等比缩放布局又称流式布局）

2.流式图片

3.流式排版

4.理解视口

√响应式设计基础

1.媒体查询

2.创建简单的媒体查询

3.构建移动设备友好的布局

4.替换整个样式表

5.识别特定的移动设备