CSS世界之文字线条阴影

效果展示

View Room

实现思路

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

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

实现代码

1
<div class="text-shadow" data-text="View Room">View Room</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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(--ruins-main) 25%, var(--ruins-main) 50%, #ffffff 50%, #ffffff 75%, var(--ruins-main) 75%, var(--ruins-main) 100%);
  background-size: 4px 4px;
  background-clip: text;
  -webkit-background-clip: text;
}
.text-shadow:before{
  content: attr(data-text);
  position: absolute;
  letter-spacing: 6px;
  color: var(--ruins-main);
  top: -6px;
  left: -6px;
}

上面代码所使用的颜色是我主题的颜色，可以根据自己的要求进行替换