CSS 盒子阴影
CSS box-shadow 属性
CSS box-shadow 属性用于为元素应用一个或多个阴影。
指定水平和垂直阴影
在最简单的用法中，你只需指定一个水平阴影和一个垂直阴影。阴影的默认颜色是当前的文本颜色。
带有 box-shadow 的 <div> 元素
为阴影指定颜色
color 参数定义了阴影的颜色。
带有浅蓝色 box-shadow 的 <div> 元素
为阴影添加模糊效果
blur 参数定义了模糊半径。数字越大，阴影就会越模糊。
带有 5px 模糊、浅蓝色 box-shadow 的 <div> 元素
设置阴影的扩散半径
spread 参数定义了扩散半径。正值会增大阴影的大小，负值会减小阴影的大小。
带有模糊、浅蓝色 box-shadow 和 12px 扩散半径的 <div> 元素
设置 inset 参数
inset 参数将阴影从外阴影（outset）更改为内阴影。
带有模糊、浅蓝色、inset box-shadow 的 <div> 元素
添加多个阴影
元素也可以拥有多个阴影
卡片
你还可以使用 box-shadow 属性来创建纸质卡片效果
1
2021 年 1 月 1 日
Hardanger, Norway
示例
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 | 为文本添加一个或多个阴影 |
