CSS text-shadow 属性

CSS text-shadow 语法

在 CSS 中，text-shadow 属性用于定义文本的阴影效果。

语法：

text-shadow: offsetX offsetY blur color;

说明：

text-shadow 接收以下 4 个参数。

offsetX：用于定义 “水平阴影”，它表示阴影的水平偏移距离，单位可以是 px、%、em 等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。
offsetY：用于定义 “垂直阴影”，它表示阴影的水平偏移距离，单位可以是 px、%、em 等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。
blur：用于定义 “模糊距离”，它表示阴影的模糊程度，单位可以是 px、%、em 等。blur 值越大，则阴影越模糊；blur 值越小，则阴影越清晰。如果不需要阴影模糊，可以把 blur 值设置为 0。
color：用于定义 “阴影颜色”。

如果想要定义多个阴影，用英文逗号分隔，比如：

text-shadow: 2px 2px 2px red, -2px -2px 2px blue;

注意，CSS3 使用的是 “W3C坐标系”，而不是 “数学坐标系”。W3C 坐标系的 Y 轴的正方向是向下的，如下图所示。

W3C 坐标系

CSS text-shadow 摘要

属于	CSS 文本属性
使用频率	中
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS text-shadow 示例

接下来，我们通过一个简单的例子来讲解一下 CSS text-shadow 属性是如何使用的。

示例 1：text-shadow 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            font-size: 40px;
            text-shadow: 4px 4px 2px red;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

text-shadow 基本用法

CSS text-shadow 定义多个阴影

text-shadow 属性可以为文本同时定义多个阴影，并且针对每个阴影使用不同的颜色。当定义多个阴影时，text-shadow 属性的值是一个使用英文逗号隔开的值列表，比如：

text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;

需要注意的是，当定义多个阴影时，写在列表最前面的阴影会显示在最顶层，后面的阴影会显示在较底层。因此，如果阴影位置重叠，前面的会覆盖后面的。

示例 2：text-shadow 定义多个阴影

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            font-size: 40px;
            text-shadow: 4px 4px 2px red, 8px 8px 2px skyblue, 12px 12px 8px springgreen;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

text-shadow定义多个阴影

示例 3：text-shadow 实现 “凹凸文字”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            padding: 16px;
            font-size: 32px;
            font-weight: bold;
            background-color: #CCC;
            color: #ddd;
            text-shadow: -1px 0 0 #333,    /*向左阴影*/
                         0 -1px 0 #333,   /*向上阴影*/
                         1px 0 0 #333,    /*向右阴影*/
                         0 1px 0 #333;    /*向下阴影*/
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

text-shadow实现“凹凸文字”

分析：

为了表现更加丰富，每个方向上的阴影颜色可以是不同的设置。如果将向左和向上的阴影颜色设置为白色，文本就会出现 “凸起效果”，text-shadow 属性修改如下，此时页面效果如下图所示。

text-shadow:-1px 0 0 white,   /*向左阴影*/
            0 -1px 0 white,  /*向上阴影*/
            1px 0 0 #333,   /*向右阴影*/
            0 1px 0 #333;   /*向下阴影*/

text-shadow实现“凸起文字”

如果将向右和向下的阴影颜色设置为白色，文本就会出现 “凹陷效果”，text-shadow 属性修改如下，此时页面效果如下图所示。

text-shadow:-1px 0 0 #333,   /*向左阴影*/
            0 -1px 0 #333,   /*向上阴影*/
            1px 0 0 white,    /*向右阴影*/
            0 1px 0 white;    /*向下阴影*/

text-shadow实现“凹陷文字”