文章目录
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阴影效果的使用，如有问题欢迎私信和评论
标签：box,示例,必知,阴影,10px,Shadow,shadow,CSS From： https://blog.csdn.net/qq_24018193/article/details/141686889