CSS 如何在文本上应用阴影效果

CSS 如何在文本上应用阴影效果

我们可以使用CSS提供的 “text-shadow “属性对文本元素施加阴影效果。text-shadow “属性需要一个数值列表,代表阴影与元素的X和Y偏移量、阴影的模糊半径以及阴影的颜色。这些值在下面的语法中列出。

语法

text-shadow: offset_y offset_x blur-radius color

这里的值和它们的含义列举如下 –

  • Offset-x – 它表示阴影在水平方向上与元素的距离。

  • offset_y – 它表示阴影在垂直方向上与元素的距离。

  • blur-radius – 代表阴影的不透明度

  • color – 它代表阴影的颜色

例子1

在这个例子中,我们将在 “h3 “元素上应用阴影效果,并给阴影一个y偏移和红色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
   h3 {
      text-shadow: 0 15px 0 red;
   }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

例子2

在这个例子中,我们将在 “h3 “元素上应用阴影效果,并给阴影一个y-offset,一个x-offset,一个不透明度,以及一个绿色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
      h3 {
         text-shadow: 10px 15px 5px green;
      }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

总结

在这篇文章中,我们学习了 “text-shadow “属性,并通过两个不同的例子,用它在文本元素上应用阴影效果。在第一个例子中,我们应用了 “红色 “的垂直阴影效果,而在第二个例子中,我们应用了 “绿色 “的垂直和水平阴影效果,模糊半径为5px。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程