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