使用 CSS 打造蚀刻文本效果

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) 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.htmlstyle.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 中练习更多实验以提升你的技能。

您可能感兴趣的其他 CSS 教程