CSS3 文本阴影

CSS3 文本阴影

text-shadow 属性为文本添加阴影效果，语法为：

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平阴影位置（必填，允许负值）。
• v-shadow：垂直阴影位置（必填，允许负值）。
• blur-radius：模糊距离（可选，默认0）。
• color：阴影颜色（可选，默认文本颜色）。

示例：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

CSS3 文本溢出处理

text-overflow 控制文本溢出时的显示方式，需配合 white-space: nowrap 和 overflow: hidden 使用：

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}

可选值：

• clip：直接裁剪溢出文本。
• ellipsis：用省略号表示被裁剪的文本。

CSS3 自动换行与断词

word-wrap 和 word-break 处理长单词或URL的换行问题：

.long-text {
  word-wrap: break-word; /* 在长单词内部换行 */
  word-break: break-all; /* 强制任意字符处断行 */
}

CSS3 多列文本布局

column-* 属性实现类似报纸的多列排版：

.multi-column {
  column-count: 3; /* 列数 */
  column-gap: 20px; /* 列间距 */
  column-rule: 1px solid #ddd; /* 列间分割线 */
}

CSS3 文本描边

-webkit-text-stroke 为文本添加描边（WebKit内核浏览器支持）：

h2 {
  -webkit-text-stroke: 1px #ff0000;
  color: transparent; /* 可选：使文本透明仅显示描边 */
}

CSS3 文本渐变与背景裁剪

通过背景渐变和 background-clip 实现文本渐变效果：

.gradient-text {
  background: linear-gradient(to right, #ff0000, #00ff00);
  -webkit-background-clip: text;
  color: transparent;
}

CSS3 文本对齐与装饰

text-align-last 控制最后一行文本的对齐方式：

p {
  text-align: justify;
  text-align-last: center; /* 最后一行居中对齐 */
}

text-decoration 扩展属性：

a {
  text-decoration: underline wavy #ff0; /* 波浪线装饰 */
}

以上效果需注意浏览器兼容性，部分属性需添加前缀（如 -webkit-）。