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