HTML网页上最常用的CSS属性应该就算是背景和边框相关属性了，通过使用背景，可以为HTML控件增加各种各样的背景颜色、背景图片；通过边框相关属性，可以为HTML控件增加各种颜色、各种线性、粗细不等的边框。
CSS 3新增的背景相关属性则进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS 3还新增了多背景图片支持，从而允许开发者在HTML组件中定义多个背景图片。CSS 3还新增了大量边框相关属性，通过这些属性可以让开发者为HTML元素定义圆角边框、渐变边框、图片边框等。
背景相关属性
背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。有如下几个常用的背景相关属性。
➢ background：设置对象的背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等属性。为了更好地控制背景，一般不建议通过该属性来控制背景。
➢ background-attachment：设置背景图片是随对象内容滚动还是固定的。在指定该属性之前，必须先指定background-image属性。该属性有如下两个值。
□ scroll：指定背景图片会随组件里内容的滚动而滚动。这是默认值。
□ fixed：背景图片固定，不会随组件里内容的滚动而滚动。
➢ background-color：用于设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
➢ background-image：用于设置背景图片。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
➢ background-position：用于设置对象的背景图片位置，该属性值应该是两个值，它们既可是实际的长度值，也可是百分比。如果只指定了一个值，该值将对应横坐标，纵坐标将默认为50%；如果指定了两个值，那么第二个值将对应纵坐标。在指定该属性之前，必须先指定background-image属性。
➢ background-repeat：适用于CSS1，用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。该属性有repeat、no-repeat、repeat-x、repeat-y 4个值，分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>背景相关属性</title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000;
height: 50px;
width: 200px;
}
</style>
</head>
<body>
<!-- 灰色背景 -->
background-color:#aaa
<div style="background-color:#aaa;">测试文字</div>
<!-- 以默认样式指定背景图片，将会在横向、纵向上平铺 -->
background-image:url(wjc.gif)
<div style="background-image:url(wjc.gif);">测试文字</div>
<!-- 不平铺的背景图片 -->
background-image:url(wjc.gif);background-repeat: no-repeat
<div style="background-image:url(wjc.gif);
background-repeat:no-repeat;">测试文字</div>
<!-- 仅横向平铺的背景图片 -->
background-image:url(logo.gif);background-repeat: repeat-x
<div style="background-image:url(wjc.gif);
background-repeat:repeat-x;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: 35% 80%;
<div style="background-image:url(wjc.gif);background-repeat:
no-repeat;background-position:35% 80%;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: 30px 12px;
<div style="background-image:url(wjc.gif);background-repeat:
no-repeat;background-position:30px 8px;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: center bottom;
<div style="background-image:url(wjc.gif);background-repeat:
no-repeat;background-position:center bottom;">测试文字</div>
</body>
</html>
背景图片固定
在默认情况下，组件里的背景图片会随着滚动条的滚动而自动移动，但如果把background- attachment属性设为fixed，那么背景图片就会被固定在该组件中，不会随着滚动条的滚动而移动。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 背景固定 </title>
</head>
<!-- 指定背景图片固定 -->
<body style="background-image:url(sky.gif);background-attachment:fixed">
<ul style="font-size:30pt;">
<script type="text/javascript">
for(var i = 0 ; i < 15 ; i++)
{
document.writeln("<li>疯狂Java讲义</li>");
}
</script>
</ul>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。