css如何写文字投影

# CSS如何写文字投影

在网页设计中，文字投影（Text Shadow）是一种简单却有效的视觉效果，能够增强文本的立体感和可读性。CSS通过`text-shadow`属性实现这一功能，本文将详细介绍其用法、参数及实际应用场景。

---

## 一、`text-shadow`基础语法

`text-shadow`属性的基本语法如下：
```css
text-shadow: h-shadow v-shadow blur-radius color;

包含4个参数（其中blur-radius和color可选）： 1. h-shadow：水平阴影偏移（必填），正值向右，负值向左。 2. v-shadow：垂直阴影偏移（必填），正值向下，负值向上。 3. blur-radius：模糊半径（可选），值越大阴影越模糊，默认0（锐利阴影）。 4. color：阴影颜色（可选），默认与文本颜色相同。

二、基础用法示例

1. 简单投影

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

效果：向右下方偏移2px，模糊4px的半透明黑色阴影。

2. 无模糊的锐利阴影

p {
  text-shadow: 1px 1px 0 #333;
}

常用于复古风格或需要清晰边缘的场景。

3. 多重阴影

通过逗号分隔实现多层阴影：

h2 {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #ff00de;
}

可创建霓虹灯或发光文字效果。

三、进阶技巧

1. 浮雕效果

通过浅色阴影+深色阴影模拟凹凸感：

.emboss {
  color: #ccc;
  text-shadow: 
    -1px -1px 0 #fff, 
    1px 1px 0 #333;
}

2. 长投影（Flat Design）

重复偏移实现流行设计风格：

.long-shadow {
  text-shadow: 
    1px 1px 0 #ddd,
    2px 2px 0 #ddd,
    3px 3px 0 #ddd;
}

3. 动态交互

结合:hover伪类实现交互效果：

button:hover {
  text-shadow: 0 0 8px gold;
  transition: text-shadow 0.3s ease;
}

四、浏览器兼容性与注意事项

1. 兼容性：所有现代浏览器均支持text-shadow（包括IE10+）。
2. 性能影响：过度使用多重阴影或大模糊值可能影响渲染性能。
3. 可访问性：确保阴影不影响文字清晰度，WCAG建议对比度至少4.5:1。

五、实际应用场景

1. 标题增强：为主标题添加轻微阴影提升层次感。
2. 按钮反馈：悬停时增加发光阴影提升交互体验。
3. 艺术文字：配合自定义字体实现海报风格设计。
4. 暗黑模式适配：通过阴影提高浅色文字在深背景下的可读性。

六、完整代码示例

<style>
  .fancy-text {
    font-size: 3em;
    color: #ff6b6b;
    text-shadow: 
      3px 3px 0 #f7fff7,
      6px 6px 0 #ffe66d;
  }
</style>

<p class="fancy-text">CSS文字投影</p>

效果：创建带有黄色长投影的粉色文字。

通过灵活组合text-shadow参数，开发者可以实现从简约到复杂的各种文字效果。建议通过浏览器开发者工具实时调试参数，快速获得理想视觉效果。 “`

注：本文约800字，涵盖基础到进阶的text-shadow用法，采用Markdown格式，可直接用于技术文档或博客发布。