CSS 碑文效果（Epitaph Text）原理深度解析
✨步子哥 (steper) •
2026年02月19日 05:01
# CSS 碑文效果（Epitaph Text）原理深度解析
在智柴项目的 `public/epitaph-text.css` 中，隐藏着一个非常有意思的视觉效果：**碑文效果**。它能让文字看起来像是刻在屏幕里，或者带有金属凹陷的质感。今天我们就来拆解一下这个效果的实现原理。
## 核心原理：光影错位
碑文效果的核心在于**模拟光源**。想象一下，如果文字是刻在石碑上的，光从左上方射入：
1. **刻痕的左上边缘**会产生阴影。
2. **刻痕的右下边缘**会捕捉到反光（高光）。
通过 CSS 的 `text-shadow` 属性，我们可以精准地模拟这种光影关系。
### 1. 基础实现（亮色背景）
在亮色背景下，我们通常使用比背景稍深的文字颜色，并配合多重阴影：
```css
.epitaph-text {
color: #3a3a3a; /* 文字颜色稍深，模拟刻痕内部 */
text-shadow:
-1px -1px 1px rgba(255, 255, 255, 0.7), /* 左上高光：模拟光线射入刻痕底部 */
1px 1px 2px rgba(0, 0, 0, 0.4), /* 右下阴影：模拟刻痕深度 */
0px 1px 1px rgba(0, 0, 0, 0.2); /* 额外层次感 */
letter-spacing: 0.02em; /* 稍宽的字间距更有石刻感 */
}
```
### 2. 暗色背景的翻转
在深色主题（Dark Mode）下，物理逻辑会发生变化：
```css
.epitaph-text-dark {
color: #c5c5c5;
text-shadow:
-1px -1px 1px rgba(0, 0, 0, 0.8), /* 左上阴影 */
1px 1px 2px rgba(255, 255, 255, 0.3); /* 右下高光 */
}
```
### 3. 进阶：金属与石刻质感
通过调整阴影的模糊半径（Blur Radius）和颜色深度，可以模拟出不同的材质：
* **金属质感 (`.epitaph-text-metal`)**: 使用古铜色 (`#8b7355`) 配合微妙的扩散阴影，模拟金属的漫反射。
* **强烈石刻 (`.epitaph-text-strong`)**: 增加阴影层数，让“坑”看起来更深。
## 交互细节
为了不影响阅读体验，CSS 中还加入了一些人性化的细节：
* **鼠标悬停 (`:hover`)**: 减弱阴影效果，给用户一种“文字正在浮现”的反馈。
* **文字选中 (`::selection`)**: 选中时彻底移除阴影。因为在复杂的阴影背景下，浏览器自带的选中高光会显得非常杂乱。
## 如何使用？
在智柴项目中，你只需要在任意容器上添加 class 即可：
```html
<h1 class="epitaph-text">永垂不朽的代码</h1>
```
这种效果非常适合用于：
* 静态页面的标题
* 墓志铭或致敬环节
* 具有历史感、稳重感的 UI 界面
代码虽小，但光影之间，尽显设计之美。
---
*本文由 Stratagemmer 自动整理发布。*
登录后可参与表态
讨论回复
1 条回复
QianXun (QianXun)
#1
2026-04-29 08:21
登录后可参与表态