使用 CSS 的双层文字效果(1)

📌 相关文章

📜 使用 CSS 的双层文字效果(1)

📅 最后修改于: 2023-12-03 15:06:45.953000 🧑 作者: Mango

使用 CSS 的双层文字效果

简介

双层文字效果是指在一个文本上方或下方添加另一层文本，使文本具有立体、阴影或反光效果。在本文中，我们将学习如何使用 CSS 实现这种效果。

实现方法

1. text-shadow 属性

CSS 的 text-shadow 属性可以添加一层阴影效果。我们可以使用该属性来实现双层文字效果。

/* 添加一层黑色阴影 */
text-shadow: 1px 1px 1px #000;

为了实现双层文字效果，我们可以添加两层阴影，分别在上方和下方。同时，我们可以调整阴影的偏移量和颜色来达到不同的效果。

/* 在上方添加一层白色阴影，在下方添加一层黑色阴影 */
text-shadow: 0 -1px 0 #fff, 0 2px 1px #000;

2. ::before 和 ::after 伪元素

另一种实现双层文字效果的方法是使用 ::before 和 ::after 伪元素。我们可以使用这两个伪元素在文本上方或下方添加另一层文本。

/* 在上方添加一层白色文本，在下方添加一层黑色文本 */
div::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}

div::after {
  content: attr(data-text);
  position: absolute;
  top: 2px;
  left: 2px;
  color: #000;
}

使用 ::before 和 ::after 伪元素的方法比 text-shadow 更加灵活，可以实现更多种类的双层文字效果。

示例

以下代码是一个使用 ::before 和 ::after 伪元素实现的双层文字效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        position: relative;
        font-size: 3em;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        display: inline-block;
        background: linear-gradient(to bottom, #111, #333);
        padding: 10px 20px;
        margin: 20px;
      }

      div::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: 0 0 10px #fff;
      }

      div::after {
        content: attr(data-text);
        position: absolute;
        top: 2px;
        left: 2px;
        color: #000;
        text-shadow: 0 2px 0 #222;
      }
    </style>
  </head>
  <body>
    <div data-text="Hello World"></div>
  </body>
</html>

总结

双层文字效果可以让文本看起来更加生动、立体，令页面更具吸引力。我们可以使用 text-shadow 属性或 ::before 和 ::after 伪元素来实现这种效果。

代码片段：

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        position: relative;
        font-size: 3em;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        display: inline-block;
        background: linear-gradient(to bottom, #111, #333);
        padding: 10px 20px;
        margin: 20px;
      }

      div::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: 0 0 10px #fff;
      }

      div::after {
        content: attr(data-text);
        position: absolute;
        top: 2px;
        left: 2px;
        color: #000;
        text-shadow: 0 2px 0 #222;
      }
    </style>
  </head>
  <body>
    <div data-text="Hello World"></div>
  </body>
</html>

/* 添加一层黑色阴影 */
text-shadow: 1px 1px 1px #000;

/* 在上方添加一层白色阴影，在下方添加一层黑色阴影 */
text-shadow: 0 -1px 0 #fff, 0 2px 1px #000;

双层文字效果可以让文本看起来更加生动、立体，令页面更具吸引力。我们可以使用 text-shadow 属性或 ::before 和 ::after 伪元素来实现这种效果。