css制作阴影文字

使用 text-shadow 属性

text-shadow 是 CSS 中专门为文字添加阴影效果的属性。语法如下：

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平阴影偏移量（必填，支持负值）。
• v-shadow：垂直阴影偏移量（必填，支持负值）。
• blur-radius：模糊半径（可选，值越大越模糊）。
• color：阴影颜色（可选，默认为文字颜色）。

示例代码：

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

多重阴影效果

通过逗号分隔多个阴影参数，可实现叠加效果：

.multi-shadow {
  text-shadow: 
    1px 1px 2px black,
    -1px -1px 2px white;
}

霓虹灯效果

结合模糊半径和亮色阴影模拟霓虹灯：

.neon-effect {
  color: #fff;
  text-shadow: 
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff;
}

浮雕/镂空效果

通过浅色和深色阴影错位实现：

.emboss {
  color: #808080;
  text-shadow: 
    -1px -1px 1px #fff,
    1px 1px 1px #000;
}

兼容性注意事项

• text-shadow 支持所有现代浏览器（包括 IE10+）。
• 对于旧版浏览器，可通过 filter: Shadow(Color=颜色, Direction=角度, Strength=强度) 实现类似效果（仅限 IE）。