文本阴影 (text-shadow)

一、text-shadow 概述

text-shadow 用来为文字添加阴影效果,如果要给文字添加多个阴影,多个阴影之间用 ,(逗号)隔开。

当阴影个数 > 1 时,阴影应用的顺序为从前到后,第一个指定的阴影在最顶部显示。

基本语法

/*
  x偏移和 Y偏移,值可以为正负整数
  模糊半径 为 0 或大于 0 的整数
*/
text-shadow: x偏移 Y偏移 模糊半径 颜色;

二、基础案例

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    font-size: 100px;
    /* 红色阴影 蓝色阴影 */
    text-shadow: 0px 0px 10px rgb(251, 9, 9),
                50px 10px 10px blue;
  }
</style>
<body>
  <div class="box">我</div>
</body>

三、常见效果

效果1: 简单阴影

/* 向右下偏移的阴影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

效果2: 发光效果

/* 四周发光 */
text-shadow: 0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #ff00de;

效果3: 3D 效果

/* 多层阴影模拟 3D */
text-shadow: 1px 1px 0 #eee,
            2px 2px 0 #ddd,
            3px 3px 0 #ccc,
            4px 4px 0 #bbb;

效果4: 空心文字

/* 通过多个阴影叠加实现空心效果 */
text-shadow: 1px 1px 0 #000,
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000;

效果5: 凹陷效果

/* 通过亮色和暗色阴影实现凹陷 */
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8),
            -1px -1px 0 rgba(0, 0, 0, 0.3);

效果6: 描边效果

/* 四个方向各添加阴影 */
text-shadow: -1px 0 #000,
            0 1px #000,
            1px 0 #000,
            0 -1px #000;

四、实战应用场景

场景1: 标题阴影

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

场景2: 按钮文字阴影

.button {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 按钮 active 状态 */
.button:active {
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

场景3: 霓虹灯效果

<style>
  .neon {
    font-size: 60px;
    color: #fff;
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff00de,
      0 0 30px #ff00de,
      0 0 40px #ff00de;
  }
</style>
<body>
  <div class="neon">霓虹灯</div>
</body>

场景4: 老报纸效果

.newspaper {
  color: #333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

场景5: 火焰文字

<style>
  .fire {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    text-shadow:
      0 0 5px #ff0000,
      0 0 10px #ff0000,
      0 0 20px #ff0000,
      0 0 40px #ff6600,
      0 0 80px #ff6600;
  }
</style>
<body>
  <div class="fire">火焰</div>
</body>

场景6: 冰冻文字

<style>
  .ice {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    text-shadow:
      0 0 5px #00ccff,
      0 0 10px #00ccff,
      0 0 20px #00ccff,
      0 0 30px #00ccff,
      0 0 40px #0099ff;
  }
</style>
<body>
  <div class="ice">冰冻</div>
</body>

五、性能优化

1. 避免过多阴影

/* ❌ 不推荐: 过多阴影 */
.text {
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    /* ...更多阴影 */
}

/* ✅ 推荐: 适度使用 */
.text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

2. 使用 rgba 而不是 hex

/* ✅ 推荐 */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

3. 注意浏览器兼容性

/* 添加前缀兼容旧浏览器 */
.text {
  -webkit-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  -moz-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

css学习