CSS3文字阴影与盒阴影：详解与示例

"这篇教程详细介绍了CSS3中的文字与文字相关样式，包括文字阴影、盒阴影、长单词与URL自动换行以及如何使用@font-face引入服务器端字体。此外，还探讨了CSS3的一些新特性，如圆角、图形化边界、阴影效果、透明度、渐变、自定义字体、多背景图、变形处理和多栏布局，并提供了浏览器兼容性的信息。" 正文: 在CSS3中，我们有了更多的手段来增强网页的视觉表现力，尤其是对于文字和其周围元素的装饰。这篇教程主要讲解了以下几个CSS3的文字与文字相关样式： 1. **文字阴影与盒阴影**： 文字阴影和盒阴影都是通过`text-shadow`和`box-shadow`属性实现的。它们的语法结构相似，包括x轴偏移量、y轴偏移量、投影长度和颜色。例如，`text-shadow: 3px 3px 7px #111;`会为文字添加一个3像素的x轴和y轴偏移，7像素模糊半径的黑色阴影。同时，`box-shadow`用于元素盒子的阴影效果。 2. **长单词与URL自动换行—word-wrap**： CSS3引入了`word-wrap`属性，允许长单词或URL在单词内部断行，避免元素因无法适应内容宽度而溢出。默认情况下，英文单词不会在中间断开，但设置`word-wrap: break-word;`可以让长单词适应容器。 3. **使用服务器端字体@font-face**： `@font-face`规则允许开发者从服务器端或网络引入自定义字体，提供了一种更灵活的字体选择方式。这样，即使用户计算机上没有特定字体，也可以在网页中显示。 教程中还提到了CSS3的一些其他新特性，如： - **圆角效果**：使用`border-radius`属性，可以为元素添加圆角，无需使用图片来模拟。 - **图形化边界**：结合`border-image`，可以创建复杂的边框图案。 - **使用RGBA实现透明效果**：RGBA允许在颜色值中指定透明度，例如`background-color: rgba(0, 0, 0, 0.5);`。 - **渐变效果**：线性渐变（`linear-gradient`）和径向渐变（`radial-gradient`）让背景颜色平滑过渡。 - **自定义字体**：通过`@font-face`规则，可以引入并应用网络上的字体文件。 - **多背景图**：使用逗号分隔的背景图片列表，可以叠加多个背景。 - **文字或图像的变形处理**：`transform`属性可实现旋转、缩放、倾斜和位移等效果。 - **多栏布局**：`column-count`和`column-gap`等属性帮助创建多列布局。 - **媒体查询**：`media queries`使得设计响应式网页成为可能，可以根据设备特性调整样式。 浏览器支持方面，教程指出Firefox 3.0.5及更新版本、Google Chrome 1.0.154及更新版本、Internet Explorer 7/8 RC1、Opera 9.6以及Safari 3.2.1等浏览器已经支持这些CSS3特性，但部分浏览器可能存在兼容性问题。例如，早期的Chrome版本对某些效果支持不够理想。 这个教程为初学者和经验丰富的开发者提供了丰富的CSS3文字样式和新特性的实践指导，帮助他们提升网页设计的美观度和功能性。