用途:为 Web 界面创建拟物化(skeuomorphic)表面效果,让卡片、按钮、开关、拨盘、输入框、工具栏或控件产生真实触感,并在不变得油亮或卡通的前提下为平面加入物理深度,覆盖按压、雕刻、凸起、软塑料、软金属等质感。
主要能力:以圆角形状与柔和上下渐变为基础,叠加 1px 渐变边框模拟反光边缘,使用外阴影做抬升、内阴影做凹陷,加入顶部高光与底部暗边,并克制地使用文字阴影和图标阴影制造浮雕感。仅在尺寸足够时添加微细节,如圆点、颗粒、接缝或细小镜面高光。过渡保持平滑短促,约 160ms 至 240ms。提供基础设计令牌(CSS 变量)可按品牌与主题调整,并提供凸起表面、按压表面、浮雕文字与图标、微纹理等类名示例。
使用方式:通过引入或复制提供的 CSS 变量与类名,将 sk-surface 用于卡片、面板、主按钮、标签页和控件外壳;is-pressed 用于激活按钮、切换控件、选中标签页与内凹槽;sk-label 与 sk-icon 用于触感控件内的标签和图标;sk-texture 用于低透明度微纹理。必要代码保持原样::root 变量与 .sk-surface、.sk-surface.is-pressed、.sk-label、.sk-icon、.sk-texture 等规则。
适用场景:需要实体感或高级硬件质感的界面组件,如拟物按钮、开关、旋钮、输入框、工具栏和控件外壳。
限制与注意事项:每个组件只使用一种物理材质(软塑料、珐琅、陶瓷、金属或橡胶);深度方向保持一致,光从上方来、阴影在下方;避免纯黑阴影,改用带色灰或品牌色暗部;同一组件内不要混用玻璃拟态、新拟物与拟物化;厚重按压效果仅保留给交互状态;小尺寸控件应减少纹理以保持清晰。使用前检查:凸起状态应有更亮顶边和更暗底边;按压状态用内阴影反转深度;圆角在实际渲染尺寸下保持平滑;渐变边框为 1px 且不压过内容;文字与图标在阴影后仍可读。官方文档未提供更多收费、平台或兼容性信息。