前端必知必会-CSS阴影效果Shadow

---

CSS 阴影效果

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

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 {
文本阴影：0 0 3px #FF0000;
}

多个阴影

要向文本添加多个阴影，可以添加以逗号分隔的阴影列表。

以下示例显示了红色和蓝色霓虹灯发光阴影：

示例
h1 {
文本阴影：0 0 3px #FF0000, 0 0 5px #0000FF;
}
以下示例显示了带有黑色、蓝色和深蓝色阴影的白色文本：

文本阴影效果！
示例

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

您还可以使用 text-shadow 属性在某些文本周围创建纯边框（无阴影）：

示例

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

CSS box-shadow 属性

CSS box-shadow 属性用于将一个或多个阴影应用于元素。

指定水平和垂直阴影
最简单的用法是，您只指定水平和垂直阴影。阴影的默认颜色是当前文本颜色。

示例
指定水平和垂直阴影：

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

指定阴影的颜色
color 参数定义阴影的颜色。

示例
指定阴影的颜色：

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

为阴影添加模糊效果
blur 参数定义模糊半径。数字越大，阴影越模糊。

示例
为阴影添加模糊效果：

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

设置阴影的扩展半径
扩展参数定义扩展半径。正值会增加阴影的大小，负值会减小阴影的大小。

示例
设置阴影的扩展半径：

div {
box-shadow: 10px 10px 5px 12px lightblue;
}

设置 inset 参数
inset 参数将阴影从外阴影（起始）更改为内阴影。

示例
添加插入参数：

div {
box-shadow: 10px 10px 5px lightblue inset;
}

添加多个阴影
一个元素也可以有多个阴影：

示例

div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

卡片

您还可以使用 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阴影效果的使用，如有问题欢迎私信和评论