简介
在本实验中,我们将学习如何使用 CSS 创建“蚀刻”或雕刻文本效果。这种效果可以为你的网页设计增添独特而时尚的触感,而且实现起来出奇地容易。通过调整阴影、背景和文本颜色,我们可以营造出文本被雕刻在背景中的错觉。快来和我们一起探索这个有趣又有创意的技巧吧!
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何使用 CSS 创建“蚀刻”或雕刻文本效果。这种效果可以为你的网页设计增添独特而时尚的触感,而且实现起来出奇地容易。通过调整阴影、背景和文本颜色,我们可以营造出文本被雕刻在背景中的错觉。快来和我们一起探索这个有趣又有创意的技巧吧!
虚拟机中已提供了 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 中练习更多实验以提升你的技能。