蚀刻文本效果 | CSS 样式技巧

简介

在本实验中，我们将学习如何使用 CSS 创建“蚀刻”或雕刻文本效果。这种效果可以为你的网页设计增添独特而时尚的触感，而且实现起来出奇地容易。通过调整阴影、背景和文本颜色，我们可以营造出文本被雕刻在背景中的错觉。快来和我们一起探索这个有趣又有创意的技巧吧！

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") subgraph Lab Skills css/selectors -.-> lab-35195{{"使用 CSS 打造蚀刻文本效果"}} css/colors -.-> lab-35195{{"使用 CSS 打造蚀刻文本效果"}} css/fonts -.-> lab-35195{{"使用 CSS 打造蚀刻文本效果"}} css/text_styling -.-> lab-35195{{"使用 CSS 打造蚀刻文本效果"}} end

蚀刻文本

虚拟机中已提供了 index.html 和 style.css。

要为背景上的文本创建“蚀刻”或雕刻效果，请使用以下 CSS 属性：

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

text-shadow 属性会创建一个白色阴影，从原点位置水平偏移 0px，垂直偏移 2px。要使效果生效，请确保背景比阴影暗。此外，文本颜色应稍微淡化，使其看起来像是从背景中雕刻出来的。最后，将 etched-text 类应用于所需的 HTML 元素，例如段落，以实现该效果。

<p class="etched-text">I appear etched into the background.</p>

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“蚀刻文本”实验。你可以在 LabEx 中练习更多实验以提升你的技能。