CSS SNIPPET

  返回

雕刻文本效果  视觉效果

为文本创建蚀刻效果,使其看起来像是在背景上雕刻出来的字。

HTML
<p class="etched-text">I appear etched into the background.</p>
CSS
.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}
效果演示

I appear etched into the background.

代码说明
  • text-shadow: 0 2px white 创建一个白色阴影,水平偏移0px ,垂直偏移2px
  • 背景必须比阴影的颜色深才会有效果。
  • 文本颜色应当稍微淡一点,使其开起来像刻在背景上。
浏览器支持

100.0%