VmVibe Materials
EN中文ESHIAR
返回地图
Digital / Web UI

磨砂透色

一种安静、扩散的半透明薄膜：能透出底色，但不会变成过度清晰的玻璃。

当前状态: ReadyFf
Ff

适用场景

  • 吸顶导航
  • 抽屉遮罩
  • 移动端面板

可调参数

  • blur
  • tint
  • grain
  • border alpha
  • contrast

AI Prompt

在柔和有色背景上覆盖磨砂透色薄膜。保持低对比、扩散边缘、细颗粒和清晰文字。

Tailwind 思路

使用 backdrop-blur-md、bg-white/10 或 bg-black/15、低透明描边和细噪点层。

性能提醒

优先使用中等 blur。全屏大面积磨砂层需要在旧手机上测试。

CSS

.frosted-film {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    rgba(20, 26, 28, 0.42);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

React 示例

export function FrostedFilmPanel({ children }) {
  return <section className="frosted-film">{children}</section>;
}