CSS3新特性：文本阴影与word-break应用

在CSS3中，文本和字体的设置得到了显著增强，其中新增的功能之一是文字阴影（text-shadow）。文字阴影允许开发者为文本添加立体感和视觉深度，通过控制水平偏移（horizontal offset）、垂直偏移（vertical offset）、模糊（blur）以及颜色（color），可以创造出丰富的视觉效果。例如，在给定的示例中，`text-shadow: 3px 3px 3px black;` 表示将文本向右上角偏移3像素，再向上偏移3像素，然后模糊3像素，最后填充黑色。这个属性在IE10及以上的浏览器中得到支持，为网页设计提供了更多的创新可能性。 除了文字阴影，CSS3还引入了新的换行规则，即`word-break`属性。这个属性用于处理文本在宽度不足时的换行方式。有三种可选值： 1. `normal`：默认行为，对于英文文本，保持单词完整性，不进行折行；对于中文文本，按标点符号换行。 2. `break-all`：英文文本会按字母边界拆分换行，不考虑单词；中文文本同样按字符边界拆分。 3. `keep-all`：英文文本与`normal`相同，中文文本保持句子完整性，直到遇到不能容纳的字符才会换行。 在提供的HTML示例中，`<p>`元素内的文本展示了`word-break`的不同用法。`p:nth-child(1)`设置了`normal`，文本保持连贯；`p:nth-child(2)`使用`break-all`，导致英文单词拆分；而`p:nth-child(3)`则用`keep-all`，中文文本按标点换行。`p:nth-child(5)`到`p:nth-child(7)`重复了换行模式以演示效果。 这些CSS3的文本和字体特性为网页设计师提供了更大的灵活性，使得他们能够创建出更具吸引力和易读性的文本布局，特别是在响应式设计中，适应不同屏幕尺寸和设备。了解并掌握这些功能对于提升网站的用户体验至关重要。