一、背景属性

background-color：设置背景颜色。
background-image：设置背景图片。
background-repeat：设置背景重复方式。
background-position：设置背景图位置。
background：背景复合属性。

/* 设置背景色，默认为 transparent */
background-color: #90ee90;

/* 设置背景图片 */
background-image: url('xxx.jpg');

/* 重复，铺满整个元素，默认值 */
background-repeat: repeat;
/* 只在水平方向重复 */
background-repeat: repeat-x;
/* 只在垂直方向重复 */
background-repeat: repeat-y;
/* 不重复 */
background-repeat: no-repeat;

/* 图片位置在左上角 */
background-position: left top;
/* 图片位置在右下角 */
background-position: right bottom;
/* 图片位置在中间 */
background-position: center center;
/* 只写一个值，另一个方向的值取 center */
background-position: left;
/* 使用坐标定位，只写一个值为x坐标，y坐标取center */
background-position: 50px 100px;
background-position: 30% 20%; 

/* 复合属性 */
background: #ffffff url('img_tree.png') no-repeat right top;

CSS3 新增背景属性：

background-origin：设置背景图的原点。
background-clip：设置背景图的向外裁剪的区域。
background-size：设置背景图的尺寸。

/* 从 padding 区域开始显示背景图像。默认值 */
background-origin: padding-box;
/* 从 border 区域开始显示背景图像 */
background-origin: border-box;
/* 从 content 区域开始显示背景图像 */
background-origin: content-box;

/* 从 border 区域开始向外裁剪背景。默认值 */
background-clip: border-box;
/* 从 padding 区域开始向外裁剪背景 */
background-clip: padding-box;
/* 从 content 区域开始向外裁剪背景 */
background-clip: content-box;
/* 背景图只呈现在文字上 */
-webkit-background-clip: text;

/* 设置背景图的尺寸 */
background-size: 300px 200px;
background-size: 100% 100%;
/* 真实大小*/
background-size: auto;
/* 将背景图片等比缩放，刚好能展示全部图片 */
background-size: contain;
/* 将背景图片等比缩放，直到完全覆盖容器 */
background-size: cover;

/* 复合属性 */
/* background: color url repeat position / size origin clip */
/*
 origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；
 如果设置了两个值，前面的是 origin，后面的 clip。
 size 的值必须写在 position 值的后面，并且用 / 分开。
 */

/* CSS3 支持添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
  url(../images/bg-rt.png) no-repeat right top,
  url(../images/bg-lb.png) no-repeat left bottom,
  url(../images/bg-rb.png) no-repeat right bottom;

二、背景渐变（CSS3）

1. 线性渐变

/* 线性渐变 - 从上到下（默认情况下） */
background-image: linear-gradient(#e66465, #9198e5);

/* 设置渐变方向 */
/* 线性渐变 - 从左到右 */
background-image: linear-gradient(to right, red , yellow);
/* 线性渐变 - 从下到上 */
background-image: linear-gradient(to top, red , yellow);
/* 线性渐变 - 从左下角到右上角 */
background-image: linear-gradient(to right top, red , yellow);

/* 使用角度设置线性渐变的方向 */
background-image: linear-gradient(30deg, red, yellow, green);
/* 调整开始渐变的位置 */
background-image: linear-gradient(red 50px, yellow 100px , green 150px);
/* 重复线性渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

2. 径向渐变

/* 径向渐变，默认从圆心四散。不一定是正圆，要看容器本身宽高比 */
background-image: radial-gradient(red, yellow, green);

/* 调整渐变圆的圆心位置 */
/* 从右上角开始渐变 */
background-image: radial-gradient(at right top, red, yellow, green);
/* 从指定位置开始渐变 */
background-image: radial-gradient(at 100px 50px, red, yellow, green);

/* 调整渐变形状为正圆 */
background-image: radial-gradient(circle, red, yellow, green);
/* 调整形状的半径 */
background-image: radial-gradient(100px, red, yellow, green);
background-image: radial-gradient(50px 100px, red, yellow, green);
/* 调整开始渐变的位置 */
background-image: radial-gradient(red 50px, yellow 100px, green 150px);

/* 重复径向渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

三、列表

适用于 <ul>、<ol>、<li> 等列表标签。

list-style-type：设置列表符号。
list-style-position：设置列表符号的位置。
list-style-image：自定义列表符号。
list-style：列表复合属性。

/* 不显示前面的标识 */
list-style-type: none;
/*实心方块*/
list-style-type: square;
/*实心圆，默认*/
list-style-type: disc;
/*空心圆*/
list-style-type: circle;

/*数字*/
list-style-type: decimal;
/*小写罗马字*/
list-style-type: lower-roman;
/*大写罗马字*/
list-style-type: upper-roman;
/*小写字母*/
list-style-type: lower-alpha;
/*大写字母*/
list-style-type: upper-alpha;

/* 符号在li里面 */
list-style-position: inside;
/* 符号在li外面 */
list-style-position: outside;

/* 自定义列表符号图片 */
list-style-image: url('sqpurple.gif');

/* 使用复合属性 */
list-style: square url("sqpurple.gif");

四、表格

适用于 <table> 元素：

table-layout：设置列宽度。
border-spacing：单元格间ta距。
border-collapse：合并单元格边框。
empty-cells：隐藏没有内容的单元格。
caption-side：设置表格标题位置。

/* 自动，列宽根据内容计算(默认值) */
table-layout: auto;
/* 固定列宽，平均分 */
table-layout: fixed;

/* 单元格间距 */
border-spacing: 5px;

/* 合并单元格 */
border-collapse: collapse;
/* 不合并单元格 */
border-collapse: separate;

/* 显示空单元格 */
empty-cells: show;
/* 隐藏空单元格 */
empty-cells: hide;

/* 表格标题在上面 */
caption-side: top;
/* 表格标题在下面 */
caption-side: bottom;

五、鼠标

/* 自定义鼠标光标 */
cursor: url("./arrow.png"), pointer;

pointer：小手。
move：移动图标。
text：文字选择器。
crosshair：十字架。
wait：等待。
help：帮助。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML/CSS 备忘录 - 11. CSS 背景/列表/表格/鼠标

一、背景属性

二、背景渐变（CSS3）

三、列表

四、表格

五、鼠标