SuperAPI AI 工具集

shadow-elevation-density

通用与其它

查看项目

更新于 10-16 03:41

技能介绍

用途:为界面建立一致的阴影、仰角、层级与空间密度规范,解决深度表达混乱、z-index 冲突与密度不统一的问题。资料以 CSS 自定义属性与参考文件形式组织,强调单一光源、分层叠加阴影、避免纯黑阴影等原则。

主要能力:提供 --shadow-0 至 --shadow-4 阴影刻度与一套每 100 递增的 z-index 刻度(从 --z-raised 到 --z-max,后者仅用于调试覆盖层);覆盖 11 套完整阴影体系(极简、分层、Material、品牌着色、暗色环境光、拟物等)、10 种玻璃与模糊配方、圆角刻度与嵌套圆角规则、三档密度模式(紧凑/舒适/宽松)的完整 token 规格,以及仰角层级、表面材质、悬停仰角动画等内容。

使用方式:将 :root 中的阴影与 z-index 变量放入上下文,再按需读取 references/ 下的参考文件,例如阴影系统读 shadow-system-recipes.md,堆叠与 z-index 读 elevation-hierarchy.md,密度读 density-modes.md,圆角读 border-radius-systems.md,玻璃模糊读 glassmorphism-effects.md,仰角动画读 shadow-animation.md,无阴影深度读 depth-and-materials.md。每个文件包含完整 CSS 自定义属性、明暗两套取值、组件应用说明与反模式。

限制:box-shadow 为绘制而非合成属性,直接动画会每帧重绘,建议改用堆叠伪元素过渡透明度或仅用于小元素;backdrop-filter 在大面积与低端安卓设备上开销高,需用 @supports 提供纯色回退。具体安装命令、收费与平台支持信息暂未提供。