CSS3权威指南：边框与背景新特性

"这是一份详尽的CSS 3.0参考手册，涵盖了边框、背景、颜色、文本效果、用户界面、选择器等多个模块，并结合HTML进行解释。由Tencent ISD webteam于2009年发布，包含了版权信息。手册特别提到了一些关键的CSS3新增属性，如border-color、border-image、border-radius、box-shadow等，以及HSL和RGBA颜色、文本阴影、多列布局、Web字体和媒体查询等功能。" 在CSS 3.0中，我们看到许多新特性和增强功能，使得网页设计更加丰富多彩和具有交互性。以下是一些核心知识点： 1. **边框（Borders）**： - `border-color`：允许指定边框的颜色，可以分别设置上、右、下、左边框的颜色，支持颜色值如RGB、HEX、HSL或关键词。 - `border-image`：允许使用图像来创建自定义边框，提供更灵活的边框设计。 - `border-radius`：用于创建圆角边框，使得元素的角部不再尖锐，增加视觉吸引力。 - `box-shadow`：添加阴影效果到元素，包括水平偏移、垂直偏移、模糊半径和阴影扩展。 2. **背景（Backgrounds）**： - `background-origin` 和 `background-clip`：控制背景图像的定位起点和绘制区域。 - `background-size`：调整背景图像的大小，可以是绝对尺寸或相对容器大小。 - `multiple backgrounds`：允许在元素上叠加多个背景图像。 - `background-attachment`：设置背景图像是否随滚动条移动。 3. **颜色（Color）**： - `HSL` 和 `HSLA` 颜色：提供了基于色调、饱和度和亮度的色彩模式，可以更直观地调整颜色。 - `opacity`：设置元素的整体不透明度，影响其及所有子元素的可见性。 - `RGBA` 颜色：允许在颜色值中使用透明度，比传统的RGB提供更多控制。 4. **文本效果（Text effects）**： - `text-shadow`：为文本添加阴影效果，提高可读性和视觉层次感。 - `text-overflow`：处理文本溢出的情况，可以隐藏、显示省略号或其他策略。 - `word-wrap`：允许单词在必要时换行，防止内容溢出元素边界。 5. **用户界面（User interface）**： - `resize`：使用户能够通过拖动调整元素大小。 - `outline`：定义元素的轮廓线，不同于边框，不占据空间。 6. **选择器（Selectors）**： - `attribute selectors`：基于元素属性值进行选择，增强了CSS的定位能力。 - `nav-up, nav-right, nav-down, nav-left`：用于导航链接的布局。 7. **其他模块**： - `media queries`：实现响应式设计，根据设备特性调整布局。 - `multi-column layout`：创建多列布局，适用于长文本展示。 - `Webfonts`：引入网络字体，提升网页的字体多样性。 - `speech`：为屏幕阅读器提供语音合成支持。 这些CSS3特性极大地扩展了Web设计师的工具箱，使他们能够创建更具表现力和功能性的网站。通过熟练掌握这些知识点，你可以构建更具现代感、交互性强且易于访问的网页。