#FFFFFF; --shadowPreset-1: 0.8rem 0.8rem 1.4rem var(--shadow-1), -0.2rem -0.2rem 1.8rem var(--shadow -2); --shadowPreset-3: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2 ); --shadowPreset-4: 8px 8px 16px var(--shadow-1), -8px -8px 16px var(--shadow-2); --shadowPreset -5: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2); --shadowPreset-6 : inset 6.91px 6.91px 15px var(--shadow-1), inset -6.91px -6.91px 15px var(--shadow-2); --shadowPreset
标题和正文使用不同的节奏,保证整体垂直节奏稳定 阴影与层级:可读的海拔系统 阴影令牌与多层叠加 :root { --shadow-1: 0 1px 2px rgba(0,0,0,.08); --shadow --shadow-3: 0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08); } .card { box-shadow: var(--shadow 避免直接动画 box-shadow,通过伪元素动画 opacity 获得性能 暗色模式与背景自适应 @media (prefers-color-scheme: dark) { :root { --shadow