CSS 阴影

使用 CSS,您可以为文本和块元素添加阴影。

使用 CSS,您可以为文本和块元素添加阴影。

  • text-shadow:设置文本的阴影效果
  • box-shadow:设置块元素的阴影效果

CSS 文本阴影

CSS text-shadow 属性设置文本的阴影效果。

最简单的用法是只设置水平阴影 (2px) 和垂直阴影 (2px)。

h1 {
  text-shadow: 2px 2px;
}

接下来,为阴影添加颜色:

h1 {
  text-shadow: 2px 2px red;
}

然后,为阴影添加模糊效果:

h1 {
  text-shadow: 2px 2px 5px red;
}

以下示例显示带有黑色阴影的白色文本:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

以下示例显示了红色霓虹灯阴影:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

多重阴影

要添加多个阴影,只需要用逗号分割多个阴影设定。

以下示例显示了红色和蓝色霓虹灯阴影:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

以下示例显示带有黑色、蓝色和深蓝色阴影的白色文本:

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

您还可以使用 text-shadow 属性在某些文本周围创建一个纯边框(没有阴影):

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

CSS 块元素阴影

CSS box-shadow 属性设置块元素的阴影效果。

最简单的用法是只设置水平阴影和垂直阴影。

这是一个带有黑色框阴影的黄色 <div> 元素,

div {
  box-shadow: 10px 10px;
}

接下来,为阴影添加颜色。

这是一个带有灰色框阴影的黄色 <div> 元素,

div {
  box-shadow: 10px 10px grey;
}

接下来,为阴影添加模糊效果。

这是一个带有模糊灰色框阴影的黄色 <div> 元素,

div {
  box-shadow: 10px 10px 5px grey;
}

卡片组件

您还可以使用 box-shadow 属性来创建卡片组件。

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

CSS 阴影属性

下表列出了 CSS 阴影属性:

属性 说明
box-shadow 为块元素添加阴影效果
text-shadow 为文本添加阴影效果