以下案例都需要有一定的 html 和 css 基础。

html 基础方面没过多要求，主要是 css 需要知道 text-shadow 的用法。

text-shadow 的基础知识可以看 CSS3 text-shadow 属性https://www.runoob.com/cssref/css3-pr-text-shadow.html 本文不做详细讲解。

以下每个案例，都是用一个标签包裹文字，后面跟着 css 代码。

案例 1 Rabbit

<h1>Rabbit</h1>
<style>
h1 {
  color: #fff;
  font: 5em Brush Script MT;
  text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}
</style>

Brush Script MT 是一种字体

案例 2 Rabbit

<h1>Rabbit</h1>

<style>
h1 {
  font-size: 5em;
  color: #9e110a;
  text-shadow: 4px 4px 0px #fff,
    10px 10px 0px #cbcbcd;
}
</style>

案例 3 Rabbit

<h1>Rabbit</h1>

<style>
h1 {
  font: 5em Brush Script MT;
  color: #a5536a;
  text-shadow: -4px -2px 0 #fff;
}
</style>

Brush Script MT 是一种字体

案例 4 Rabbit

<h1>Rabbit</h1>

<style>
h1 {
  font-size: 5em;
  color:rgba(67,153,97,.5);
  text-shadow:4px 4px 0 rgba(236,144,79, 0.6);
}
</style>

案例 5 Rabbit

<h1>Rabbit</h1>

<style>
h1 {
  font: bold 5em Brush Script MT ;
  color:#222;
  text-shadow: 0px 2px 3px #666;
}
</style>

Brush Script MT 是一种字体