当前位置：首页 > ops >正文

CSS 文字浮雕效果：巧用 text-shadow 实现 3D 立体文字

ops 2025/7/6 8:49:48

在网页设计中，文字是核心信息载体。如何让文字更具视觉冲击力？CSS 的text-shadow属性是实现文字浮雕效果的关键工具。通过巧妙配置阴影参数，我们可以轻松创建出从背景中 "凸起" 或 "凹陷" 的立体文字效果。

什么是 text-shadow？

text-shadow是 CSS3 中用于为文字添加阴影效果的属性。其基本语法如下：

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

h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置（必需）
blur-radius：阴影模糊半径（可选）
color：阴影颜色（可选）

关键特性：

可叠加多层阴影，用逗号分隔
支持负值（反向阴影）
现代浏览器广泛支持（IE9+）

实现文字浮雕效果的核心技巧

浮雕效果的核心在于通过多层阴影模拟光线照射：

凸起效果：顶部 / 左侧添加浅色阴影，底部 / 右侧添加深色阴影
凹陷效果：方向相反，顶部 / 左侧深色，底部 / 右侧浅色

以下是一个完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSS文字浮雕</title><style>body { background: #e6e6e6; text-align: center; }h1 {font-size: 6rem;font-weight: 900;color: #f0f0f0;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>
</head>
<body><h1>CSS文字浮雕示例</h1>
</body>
</html>

代码解析

上述代码的关键点：

多层阴影叠加：
- 前 5 层阴影通过不同距离的底部阴影模拟立体感
- 后续阴影添加模糊效果和透明度，增强深度感
颜色与对比度：
- 文字颜色 (#f0f0f0) 与背景 (#e6e6e6) 相近
- 阴影颜色从浅灰 (#ccc) 过渡到深灰 (rgba (0,0,0,.15))
- 高对比度阴影组合是浮雕效果的关键
字体粗细：
font-weight: 900使文字更厚实，浮雕效果更明显