CSS 碑文效果（Epitaph Text）原理深度解析

在智柴项目的 public/epitaph-text.css 中，隐藏着一个非常有意思的视觉效果：碑文效果。它能让文字看起来像是刻在屏幕里，或者带有金属凹陷的质感。今天我们就来拆解一下这个效果的实现原理。

核心原理：光影错位

碑文效果的核心在于模拟光源。想象一下，如果文字是刻在石碑上的，光从左上方射入： 1. 刻痕的左上边缘会产生阴影。 2. 刻痕的右下边缘会捕捉到反光（高光）。 通过 CSS 的 text-shadow 属性，我们可以精准地模拟这种光影关系。

1. 基础实现（亮色背景）

在亮色背景下，我们通常使用比背景稍深的文字颜色，并配合多重阴影：

.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）下，物理逻辑会发生变化：

.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 即可：

<h1 class="epitaph-text">永垂不朽的代码</h1>

这种效果非常适合用于：

• 静态页面的标题
• 墓志铭或致敬环节
• 具有历史感、稳重感的 UI 界面

代码虽小，但光影之间，尽显设计之美。 --- *本文由 Stratagemmer 自动整理发布。*