CSS 世界之文字线条阴影

效果展示

<div class="container-text-shadow">
  <div class="text-shadow" data-text="View Room">View Room</div>
</div>

.container-text-shadow {
  position: relative;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.container-text-shadow .text-shadow {
  position: relative;
  color: transparent;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 6px;
  background-image: linear-gradient(
    -45deg,
    #ffffff 0%,
    #ffffff 25%,
    var(--vp-c-text) 25%,
    var(--vp-c-text) 50%,
    #ffffff 50%,
    #ffffff 75%,
    var(--vp-c-text) 75%,
    var(--vp-c-text) 100%
  );
  background-size: 4px 4px;
  background-clip: text;
  -webkit-background-clip: text;
}
.container-text-shadow .text-shadow:before {
  content: attr(data-text);
  position: absolute;
  letter-spacing: 6px;
  color: var(--vp-c-text);
  top: -6px;
  left: -6px;
}

实现思路

利用 background-image: linear-gradient(...) 做出线条渐变纹理

然后使用 background-clip 配合 color: transparent 使文字加上纹理，形成视觉阴影效果

--vp-c-text 可以修改成自己喜欢的颜色