text-shadow 可以为文本添加阴影， 除了没有扩散半径，使用方法与 box-shadow 类似，不再过多赘述。

<h1 class="title">三眼鸭的编程教室</h1>
<style>
    .title {
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
        text-shadow: 10px 5px 5px teal;
    }
</style>

$$demo

<h1 class="title">三眼鸭的编程教室</h1> <style> .title { /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ text-shadow: 10px 5px 5px teal; } </style>

$$

---

练习

1. 完成以下效果。

$$demo

<h1 class="title">三眼鸭的编程教室</h1> <style> .title { color: gray; text-shadow: 0 0 20px #f7d000; } </style>

$$

$$answer

<h1 class="title">三眼鸭的编程教室</h1>
<style>
    .title {
        color: gray;
        text-shadow: 0 0 20px #f7d000;
    }
</style>

$$

2. 完成以下效果。

$$demo <h1 class="title">三眼鸭的编程教室</h1> <style> .title { display: inline-block;

    padding: 10px 20px;

    background-color: pink;

    color: white;
    text-shadow: 4px 4px 0 teal;
}

</style> $$

$$answer

<h1 class="title">三眼鸭的编程教室</h1>
<style>
    .title {
        display: inline-block;

        padding: 10px 20px;

        background-color: pink;

        color: white;
        text-shadow: 4px 4px 0 teal;
    }
</style>

$$