API 浏览器
CSS 阴影(高度)

添加阴影以创建深度/高度效果的简单而有效的方法。阴影符合 Material Design 规范(24 级深度)。

¥Simple yet effective way to add shadows to create a depth/elevation effect. The shadows are in accordance to Material Design specifications (24 levels of depth).

用法(Usage)

¥Usage

CSS 类名描述
no-shadow移除所有阴影
inset-shadow在顶部设置内嵌阴影
inset-shadow-down在底部设置内嵌阴影
shadow-1设置深度为 1
shadow-2设置深度为 2
shadow-N其中 N 是一个从 1 到 24 的整数。
shadow-transition在阴影上应用默认 CSS 过渡效果
Standard shadows



上方阴影指向元素底部。如果你希望它们指向元素的顶部,请在数字前添加 up

¥The shadows above point towards the bottom of the element. If you want them to point towards the top of the element, add up before the number:

CSS 类名描述
shadow-up-1设置深度为 1
shadow-up-2设置深度为 2
shadow-up-N其中 N 是一个从 1 到 24 的整数。
Shadows pointing up



Inset shadow