码农教程 - 一技在手,衣食无忧! tools

目录

CSS 文字阴影

❮ 上一节 下一节 ❯

文字阴影

这个text-shadow属性为文本添加阴影。

在最简单的使用中，您只需指定水平阴影（2px）和垂直阴影（2px）：

文字阴影效果！

示例

h1 {
  text-shadow: 2px 2px;
}
亲自试一试 »

接下来，为阴影添加颜色（红色）：

文字阴影效果！

示例

h1 {
  text-shadow: 2px 2px red;
}
亲自试一试 »

然后，为阴影添加模糊效果（5px）：

文字阴影效果！

示例

h1 {
  text-shadow: 2px 2px 5px red;
}
亲自试一试 »

更多文本阴影示例

示例1

白色文本上的文本阴影：

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
亲自试一试 »

示例2

带有红色霓虹灯的文本阴影：

h1 {
  text-shadow: 0 0 3px #ff0000;
}
亲自试一试 »

示例3

带有红色和蓝色霓虹灯发光的文本阴影：

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
亲自试一试 »

示例4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
亲自试一试 »

提示：转到我们的 CSS 字体本章了解如何更改字体、文本大小和文本样式。

提示：转到我们的 CSS 文本效果章节了解不同的文本效果。

通过练习测试一下

练习:

将所有 <p> 元素的文本颜色更改为 "red"。

<style>
p {
  : red;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

CSS 文本阴影属性

Property Description
text-shadow Specifies the shadow effect added to text

❮ 上一节 下一节 ❯