CSS3新特性：圆角、盒模型、自定义字体与溢出控制

"CSS3新增了多个属性，包括用于创建圆角边框的`border-radius`，改变盒模型的`box-sizing`，自定义服务器端字体的`@font-face`，控制内容溢出行为的`overflow`，以及允许长字符串换行的`word-wrap`和文本描边`text-stroke`等。" 在CSS3中，开发者获得了更多丰富和强大的样式控制能力。以下是对这些新属性的详细解释： 1. **`border-radius`**：这个属性用于创建具有圆角的边框，它可以是四个独立的值来分别设置每个角落的半径，或者两个值来设置对角线的半径。例如，`border-radius:10px 20px`将让顶部和底部的边框圆角不同，而`border-radius:10px/20px`则创建一个椭圆形的边框。 2. **`box-sizing`**：此属性改变了元素的盒模型，允许开发者选择`content-box`（标准盒模型）或`border-box`（IE盒模型）。`content-box`包含的内容宽度和高度不包括边框和内填充，而`border-box`则包括了这些部分。 3. **`@font-face`**：通过`@font-face`规则，开发者可以引入服务器端的自定义字体，提高网站的视觉效果。定义时需要指定`font-family`和`src`，如示例中的`webfont`字体。 4. **`overflow`**：`overflow`属性控制元素内容超出其容器时的行为。可以设置为`auto`（添加滚动条视需要）、`scroll`（始终显示滚动条）、`hidden`（隐藏超出内容）或`visible`（默认，内容溢出容器）。还可以单独控制水平（`overflow-x`）或垂直（`overflow-y`）方向的溢出。 5. **`word-wrap`**：当遇到非常长的单词或URL时，`word-wrap: break-word;`允许单词在必要时断行，避免内容溢出容器。 6. **`-webkit-text-stroke`**：这是一个非标准的Webkit前缀属性，用于给文本添加描边，增强文本的可读性或视觉效果。例如，`-webkit-text-stroke: 1px black;`会在文本上添加1像素宽的黑色描边。 这些CSS3属性的使用大大提升了网页设计的灵活性和用户体验。它们允许设计师创造出更具视觉吸引力和交互性的网页，同时提供了更好的内容布局和管理控制。结合其他CSS3特性，如渐变、阴影、动画和多列布局等，开发者能够构建出更现代、更动态的网页应用。