CSS3颜色渐变
background-image:linear-gradient(black,blue,green,red);
默认从上到下显示。
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>背景属性的设置</title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 div {
9 height:45px;
10 border:2px solid red;
11 }
12 </style>
13 </head>
14 <body>
15 <ul>
16 <li>
17 <h3>颜色渐变（默认从上到下）</h3>
18 <div style="background-image:linear-gradient(black,blue,green,red) ;background-color:gray; height:200px;border:1px solid red;background-repeat:no-repeat;">
19
20 </div>
21 </li>
22
23 </ul>
24 </body>
25 </html>
background-repeat背景图片平铺
背景填充的方式。
语法：background-repeat：<repeat-style>[,<repeat-style>]
repeat-style可以取的值：repeat-x（北京在横向上平铺）， repeat-y（背景在纵向上平铺），repeat（在横向上和纵向上平铺），no-repeat（背景图像不平铺），round（CSS3背景图片自动缩放直到适应并填充满整个容器），space（背景图像以相同的间距平铺且填充满整个容器或某个方向）。
示例代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>背景属性的设置</title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 div {
9 height:45px;
10 border:2px solid red;
11 }
12 </style>
13 </head>
14 <body>
15 <ul>
16 <li>
17 <h3>背景图片默认平铺</h3>
18 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;">
19 背景图片
20 </div>
21 </li>
22 <li>
23 <h3>背景图片no-repeat不平铺</h3>
24 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:no-repeat;">
25 背景图片
26 </div>
27 </li>
28 <li>
29 <h3>背景图片repeat-x横向平铺</h3>
30 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-x;">
31 背景图片
32 </div>
33 </li>
34 <li>
35 <h3>背景图片repeat-y纵向平铺</h3>
36 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:repeat-y;">
37 背景图片
38 </div>
39 </li>
40 <li>
41 <h3>背景图片round:将背景图片自动缩放知道适应并填充满整个容器</h3>
42 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:round;">
43 背景图片
44 </div>
45 </li>
46 <li>
47 <h3>背景图片space:以相同的间距平铺且填充满整个容器或某个方向</h3>
48 <div style="background-image:url(../images/boy1.jpg);background-color:gray; height:260px;border:1px solid red;background-repeat:space;">
49 背景图片
50 </div>
51 </li>
52 </ul>
53 </body>
54 </html>
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 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>背景属性的设置</title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 div {
9 height:45px;
10 border:2px solid red;
11 }
12 </style>
13 </head>
14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
15 <ul>
16 <li>
17 <h3>背景图片的位置（原图）</h3>
18 <div style="background-image:url(../images/jd2015img.png);height:200px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
19 原图样式
20 </div>
21 </li>
22 <li>
23 <h3>背景图片的位置（难点）</h3>
24 <div style="background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
25 手机未选中
26 </div>
27 </li>
28 <li>
29 <h3>背景图片的位置（难点）</h3>
30 <div style="background-position:0 -26px;background-image:url(../images/jd2015img.png);height:20px;background-repeat:no-repeat;padding-left:20px;line-height:20px;">
31 手机选中
32 </div>
33 </li>
34
35 </ul>
36 </body>
37 </html>
background
背景设置的复合属性，可以只通过这一个属性设置背景图片，背景颜色，是否平铺等内容。使用频率非常高。
语法：background：[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
顺序方面内有特别的要求。
示例代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>背景属性的设置</title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 div {
9 height:45px;
10 border:2px solid red;
11 }
12 </style>
13 </head>
14 <body style="background-image:url(../images/boy2.jpg);background-attachment:fixed;background-repeat:no-repeat;">
15 <ul>
16 <li>
17 <h3>背景属性的综合属性设置</h3>
18 <div style="background:url(../images/jd2015img.png) 0 -26px no-repeat;padding-left:20px;height:20px;">
19 手机选中
20 </div>
21 </li>
22 </ul>
23 </body>
24 </html>
list-style-type
列表项样式，主要用在<li>标签，使用频率较低。
也可以通过list-style-image属性指定自己的图片作为列表项样式。
取值的种类较多，查看操作手册即可。
一般都是使用list-style-type:none，即没有列表项图标。
列表属性都具有继承性。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>列表项样式</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li> 11 <h3>列表类型的样式</h3> 12 <ul> 13 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 14 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 15 </ul> 16 </li> 17 <li> 18 <h3>列表类型的样式</h3> 19 <ul> 20 <li style="list-style-type:square;">第一项（列表项图标为方块）</li> 21 <li style="list-style-type:none;">第二项（没有列表项图标）</li> 22 </ul> 23 </li> 24 <li> 25 <h3>列表项都具有继承性</h3> 26 <ul style="list-style-type:none;"> 27 <li>第一项（继承父标签）</li> 28 <li style="list-style-type:square;">第二项（不适用从父标签继承过来的样式）</li> 29 </ul> 30 </li> 31 </ul> 32 </body> 33 </html>
list-style-image
自定义列表项前面的图标。使用频率几乎为0。
list-style
列表项属性的综合设置（可以综合设置上述的列表项属性），使用频率较高。