CSS3新特性详解：从边框到文字阴影

"这是一个关于CSS3的教程，涵盖了创建圆角矩形、添加方框阴影、使用图片创建边框、背景图片尺寸控制、背景定位、多重背景图像、文本阴影以及文字自动换行和自定义字体等核心概念。" CSS3是CSS（级联样式表）的第三个主要版本，带来了许多新的特性和功能，极大地增强了网页设计的灵活性和表现力。以下是对标题和描述中提到的一些关键知识点的详细解释： 1. **创建圆角矩形**：`border-radius` 属性使得元素的四个角可以变得圆润，不再局限于传统的直角矩形。例如，`border-radius: 10px;` 将创建一个四个角都是10像素半径的圆形效果。 2. **方框阴影**：`box-shadow` 属性用于在元素周围添加阴影效果。如 `box-shadow: 10px 15px 5px #888888;` 表示阴影向左10像素，向下15像素，模糊半径为5像素，颜色为灰色（#888888）。 3. **边框图像**：`border-image` 可以使用图片作为边框，`border-image:url(border.png) 30 30 round;` 表示使用指定的图片，按30像素的比例平铺，`round` 指定图像如何填充边框。 4. **背景图片尺寸**：`background-size` 控制背景图片的大小。例如，`background-size: 50px 100px;` 调整背景图片的宽度为50像素，高度为100像素；`background-size: 40% 100%;` 会根据父元素的宽度拉伸背景图片至40%，高度保持100%填充。 5. **背景图片定位**：`background-origin` 属性定义了背景图片的定位区域，如 `background-origin: content-box;` 使背景图片根据内容区域进行定位。 6. **多重背景图像**：通过逗号分隔多个 `background-image` 声明，可以同时设置多个背景图片，如 `background-image: url(bg_flower.gif), url(bg_flower_2.gif);`。 7. **文本阴影**：`text-shadow` 属性给文本添加阴影效果，例如 `text-shadow: 5px 5px 5px #FF0000;` 会给文本添加一个5像素偏移的红色阴影，其中前两个值是水平和垂直偏移，第三个值是模糊半径。 8. **文字自动换行**：`word-wrap: break-word;` 允许单词在必要时断开，防止内容溢出容器。 9. **自定义字体**：CSS3引入了`@font-face`规则，允许设计师引用远程字体文件，即使用户计算机上没有该字体，也能在浏览器中正确显示。这样设计师可以使用任何他们喜欢的字体，只要用户有网络连接。 以上只是CSS3中的一部分特性，实际上，CSS3还提供了更多的布局方式（如Flexbox和Grid）、过渡和动画、多列布局、选择器增强等功能，这些都极大地丰富了网页设计的可能性。