文本模版：线条阴影

预览效果

<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;
}

代码解析

HTML 结构

这个线条阴影文本效果的HTML结构非常简洁：

1. 容器元素 (div.container-text-shadow)：作为整个文本效果的外层容器，提供居中对齐的布局环境。
2. 文本元素 (div.text-shadow)：包含实际显示的文本内容，并通过data-text属性定义了与文本内容相同的值，用于 CSS 伪元素中创建阴影效果。

CSS 实现原理

1. 布局设置：容器使用 flex 布局实现内容居中对齐，确保文本在页面中水平居中显示。
2. 基础文本样式：设置文本为透明色，定义字体大小、字重和字母间距。
3. 线条纹理效果：
   • 通过background-image和linear-gradient创建-45度的斜线纹理背景
   • 使用background-size: 4px 4px设置纹理大小
   • 通过background-clip: text（及 WebKit 前缀版本）将纹理背景应用到文本上
4. 阴影效果实现：
   • 使用::before伪元素和content: attr(data-text)创建一个与原文本完全相同的副本
   • 通过position: absolute、top: -6px和left: -6px将伪元素定位在原文本左上方
   • 设置伪元素的颜色为主题文本色，形成明显的阴影效果

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和文本元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 修改文本内容：将div.text-shadow元素的内容和data-text属性值修改为你想要显示的文本。
4. 自定义视觉效果：可以通过修改线条颜色、间距、阴影偏移量等参数来自定义线条阴影效果的外观。

浏览器兼容性

• 主流浏览器：此线条阴影文本效果在 Chrome、Firefox、Safari 和 Edge 等现代浏览器中具有良好的兼容性。
• IE 浏览器：由于使用了background-clip: text等较新的 CSS 特性，在 Internet Explorer 中可能无法正常显示或需要额外的兼容性处理。
• 性能考虑：文本效果通常不会对性能产生显著影响，但在包含大量文本的页面上，建议进行性能测试和优化。