CSS 盒子阴影
CSS box-shadow 属性
CSS box-shadow
属性用于将一个或多个阴影应用于元素。
指定水平和垂直阴影
最简单的用法是,你只需指定水平和垂直阴影。阴影的默认颜色是当前文本颜色。
A<div> 带有 box-shadow 的元素
指定阴影的颜色
这 color
参数定义阴影的颜色。
A<div> 带有浅蓝色 box-shadow 的元素
为阴影添加模糊效果
这 blur
参数定义模糊半径。数字越大,阴影越模糊。
A<div> 带有 5px 模糊浅蓝色框阴影的元素
设置阴影的扩散半径
这 spread
参数定义扩散半径。正值会增加阴影的大小,负值会减小阴影的大小。
A<div> 元素带有模糊的浅蓝色框阴影,扩散半径为 12px
设置 inset 参数
这 inset
参数将阴影从外阴影(一开始)更改为内阴影。
A<div> 带有模糊、浅蓝色插入框阴影的元素
添加多重阴影
一个元素还可以有多个阴影:
牌
您还可以使用 box-shadow
创建类似纸质卡片的特性:
1
2021 年 1 月 1 日
挪威哈当厄尔
例子
div.card {
宽度:250px;
盒子阴影:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
文本对齐:居中;
}
尝试一下(文字卡)»
尝试一下(图片卡)»
CSS 阴影属性
下表列出了 CSS 阴影属性:
财产 | 描述 |
---|---|
盒子阴影 | 向元素添加一个或多个阴影 |
文字阴影 | 为文本添加一个或多个阴影 |