使用CSS为文本添加多个阴影

无论是在平面设计、摄影还是网页中，添加阴影都是一种强大的技术，可以营造深度和透视感。无需打开Photoshop或其他图像编辑程序即可将此效果应用于网页上的文本、图像和其他元素，可以使用CSS3属性实现。您可以使用两个属性。大多数浏览器都支持这两个功能，如下所示：

  • text-shadow

  • box-shadow

使用CSS，通过逗号分隔的阴影列表添加多个阴影。

使用CSS text-shadow属性

CSS文本阴影是一个属性，它将阴影添加到文本。该属性将接受可以应用于文本的阴影列表。它也可以进行动画处理，这是一个重要的功能，因为它可以使您的网站更具视觉吸引力。

语法

以下是CSS text-shadow属性的语法：

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

示例

让我们来看下面的例子，我们将使用text-shadow属性并将阴影应用于文本。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .text {
         font-family: verdana;
         text-shadow: 1px 1px 2px #DE3163, 2px 3px 9px #7D3C98;
      }
   </style>
</head>
<body>
   <p class="text">Mahendra Singh Dhoni is an Indian professional cricketer, who plays as a wicket-keeper-batsman. Widely regarded as one of the world's greatest wicket-keeper-batsmen and captains in the history of the sport, he is known for his explosive batting, wicket-keeping and leadership skills.</p>
</body>
</html>

运行以上代码后，生成的输出将包含应用于它的阴影，显示在网页上。

使用CSS box-shadow属性

可以使用box-shadow属性为HTML元素应用多个阴影。通过在每对值之间添加逗号，可以修改每个阴影效果。offset-x和offset-y值决定了阴影相对于HTML元素的位置。一个阴影最多可以有六个不同的值。必须提供offset-x和offset-y的值。

语法

以下是CSS box-shadow属性的语法：

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

示例

在下面的示例中，我们将使用CSS box-shadow属性添加阴影。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         padding: 100px;
      }
      .tp {
         width: 270px;
         height: 200px;
         font-family: verdana;
         font-size: 30px;
         color: #DE3163;
         background-color: #FEF9E7;
         box-shadow: 7px 7px 10px #BB8FCE, -6px -6px 12px #ABEBC6;
      }
   </style>
</head>
<body>
   <div class="tp">WELCOME</div>
</body>
</html>

运行以上代码后，输出窗口将弹出，显示应用了阴影的文本，显示在网页上。

更新于：2024年1月8日

997 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告