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 自动整理发布。*