Forum:如何让一段字的阴影与这段字本身显示的内容不同？

論壇 > 提問求助 > 如何让一段字的阴影与这段字本身显示的内容不同？

我打算让一段文本本身显示为一个内容，再让这个文本的两个阴影分别显示为不同的两个内容，代码可以实现吗？如果可以，我该怎么办？

-Glorysans（留言） 2024年1月30日 (二) 15:27 (UTC)

用在哪里？为何要这样做？您的要求很罕见 --清风弟唱着最炫的摸哈风 (talk) 2024年1月31日 (三) 19:31 (UTC)

就是问问代码能不能实现，看看能不能实现同时显示多个文本的内容 --Glorysans（留言） 2024年2月2日 (五) 05:10 (UTC)

是的，你可以使用 CSS 来实现文本的阴影效果，然后通过 HTML 或者 Wikipage 这样的 Markup 语言来呈现。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text with Shadows</title>
<style>
  .text-with-shadows {
    position: relative;
    font-size: 36px;
    color: #333;
  }
  .text-with-shadows::after,
  .text-with-shadows::before {
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 2px; /* Adjust as needed */
    color: #f00; /* First shadow color */
    z-index: -1;
  }
  .text-with-shadows::before {
    left: -2px; /* Adjust as needed */
    color: #00f; /* Second shadow color */
  }
</style>
</head>
<body>

<div class="text-with-shadows" data-content="Your text here">
  Your text here
</div>

</body>
</html>

在这个示例中，.text-with-shadows 类应用了两个伪元素 ::before 和 ::after，它们分别用来表示两个不同的阴影。你可以根据需要调整它们的颜色、位置和大小。清风弟唱着最炫的摸哈风 (talk) 2024年2月27日 (二) 05:28 (UTC)