W3cSchool: CSS2参考手册 - 背景与边框详解

W3cSchool 的《DIV+CSS2_参考手册》是一本详细介绍CSS（层叠样式表）技术的重要参考资料，特别是在处理HTML元素布局与美化方面。该手册特别关注于CSS2版本中的两个关键特性：背景和边框。 **CSS 背景属性** 1. **background** - 简写属性，允许同时设置背景颜色、图像、重复方式、附着方式和位置。通过这个属性，开发者能够一次性定义丰富的背景效果。 2. **background-color** - 设置元素的背景颜色，支持多种颜色表示法，如RGB（颜色-红绿蓝值）、十六进制（颜色-#RRGGBB）和预定义颜色名（如`transparent`）。 3. **background-image** - 定义背景图像，使用`url`指定图像源，`none`表示没有背景图像。此外，还提供了几种定位方式，如`topleft`、`center`等。 4. **background-repeat** - 控制背景图像的重复方式，有`repeat`（默认，图像按原尺寸填充整个背景区域）、`repeat-x`（沿水平方向重复）、`repeat-y`（沿垂直方向重复）和`no-repeat`（不重复）。 5. **background-attachment** - 设置背景图像是否随文档内容滚动。`scroll`表示跟随滚动，`fixed`使图像固定在视口。 6. **background-position** - 设置背景图像的起始位置，支持百分比和具体位置关键词。 **CSS 边框属性 (border)** 1. **border** - 简写属性，用于一次设定所有边框的宽度、样式和颜色。 2. **border-width** - 分别设置上、右、下、左四条边框的宽度，也可用简写形式。 3. **border-style** - 设置边框样式，包括`none`（无边框）、`hidden`（隐藏）、`dotted`（点线）、`dashed`（虚线）、`solid`（实线）、`double`（双线）、`groove`（沟槽）、`ridge`（脊状）、`inset`（内凹）和`outset`（外凸）。 4. **border-color** - 设置边框颜色，可以设置单个颜色，也可以针对每个边框分别设置。 5. **border-bottom**、**border-left** - 简写属性，分别针对底部和左边的边框设置宽度、样式和颜色。 掌握这些CSS2的基本概念和属性，对于创建出响应式、美观且功能丰富的网页布局至关重要。通过灵活运用背景和边框属性，开发人员能够实现各种视觉效果，提升网站设计的专业性和用户体验。熟练应用这些知识，无论是在网页开发初学者阶段还是高级设计师手中，都能发挥关键作用。