CSS3颜色渐变
background-image:linear-gradient(black,blue,green,red);
默认从上到下显示。
示例代码：
1 2 3 4 5背景属性的设置 6 7 13 14 15
- 16
- 17
颜色渐变（默认从上到下）
1819 2021 22 23
background-repeat背景图片平铺
背景填充的方式。
语法：background-repeat：<repeat-style>[,<repeat-style>]
repeat-style可以取的值：repeat-x（北京在横向上平铺）， repeat-y（背景在纵向上平铺），repeat（在横向上和纵向上平铺），no-repeat（背景图像不平铺），round（CSS3背景图片自动缩放直到适应并填充满整个容器），space（背景图像以相同的间距平铺且填充满整个容器或某个方向）。
示例代码如下：
1 2 3 4 5背景属性的设置 6 7 13 14 15
- 16
- 17
背景图片默认平铺
1819 背景图片2021 22 - 23
背景图片no-repeat不平铺
2425 背景图片2627 28 - 29
背景图片repeat-x横向平铺
3031 背景图片3233 34 - 35
背景图片repeat-y纵向平铺
3637 背景图片3839 40 - 41
背景图片round:将背景图片自动缩放知道适应并填充满整个容器
4243 背景图片4445 46 - 47
背景图片space:以相同的间距平铺且填充满整个容器或某个方向
4849 背景图片5051 52
示例效果如下：
backgroun-attachment
背景图像是随对象内容滚动还是固定的。（使用频率：几乎不用）
语法：background-attachment：<attachment>[，<attachment>]*
attchment：fixed（背景图像相对于窗体固定），local（背景图像相对于元素固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容，CSS3），scroll（默认方式，背景图像相对于元素固定，也就是说元素内容滚动时背景图像不会跟着动，因为背景图像总是要跟随元素本身。但会随着元素的祖先元素或窗体一起滚动）
background-position（重点难点）
设置或者检索对象的背景图像位置，必须先指定background-image属性值。
使用频率非常高。
语法：background-position:<position>[,<position>]
position可以取的值有：left | center | right | top | bottom | <percentage> | <length> | 等（查看手册）
background-position该属性提供两个参数值。CSS3中可以提供四个值，每个percentage或length偏移前都必须跟着一个关键字（即left|right|center|bottom|top），偏移量相对关键字位置进行偏移。例如（假设要定义背景图像在容器中右下方，并且距离邮编和底部各20px）：
background:url(test1.jpg) no-repeat right 20px bottom 20px
也可以设置3个参数值，例如：
background:url(test1.jpg) no-repeat left bottom 20px
如果提供两个参数，则第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，则该值用于横坐标，纵坐标默认为50%（即center）。
不适用具体坐标的常见位置如下图所示：（这种应用并不多）
使用坐标，显示图片中的某一位置。（向下为正方向，向上为负方向，向左为负方向，向右为正方向）。
示例代码如下：
1 2 3 4 5背景属性的设置 6 7 13 14 15
- 16
- 17
背景图片的位置（原图）
1819 原图样式2021 22 - 23
背景图片的位置（难点）
2425 手机未选中2627 28 - 29
背景图片的位置（难点）
3031 手机选中3233 34 35
示例效果如下：
background
背景设置的复合属性，可以只通过这一个属性设置背景图片，背景颜色，是否平铺等内容。使用频率非常高。
语法：background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
顺序方面内有特别的要求。
示例代码如下：
1 2 3 4 5背景属性的设置 6 7 13 14 15
- 16
- 17
背景属性的综合属性设置
1819 手机选中2021 22
list-style-type
列表项样式，主要用在<li>标签，使用频率较低。
也可以通过list-style-image属性指定自己的图片作为列表项样式。
取值的种类较多，查看操作手册即可。
一般都是使用list-style-type:none，即没有列表项图标。
列表属性都具有继承性。
示例代码如下：
1 2 3 4 5列表项样式 6 7 8 9
- 10
- 11
列表类型的样式
12- 13
- 第一项（列表项图标为方块） 14
- 第二项（没有列表项图标） 15
17 - 18
列表类型的样式
19- 20
- 第一项（列表项图标为方块） 21
- 第二项（没有列表项图标） 22
24 - 25
列表项都具有继承性
26- 27
- 第一项（继承父标签） 28
- 第二项（不适用从父标签继承过来的样式） 29
31
list-style-image
自定义列表项前面的图标。使用频率几乎为0。
list-style
列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。
练习：新浪头部导航的设计与制作
需要实现的效果
代码：
1 2 3 4 5新浪导航条的实现 6 7 12 13 14新浪导航条的实现
15 32 33
方法二：
1 2 3 4 5新浪导航条的实现方法二 6 7 40 41 4243 6364 65