磨砂玻璃画廊

半透明 surface + backdrop 模糊 + 高光折光边的材质层（不依赖浏览器专属滤镜，Chromium / Firefox 同构；动态流动感由可选运行时 glass-fluid.js 提供——指针镜面高光 + 按压收紧，详见本页「动态流动感」）。

主按钮

次按钮

半透明 + 模糊 + 折光边跨浏览器一致；控件尺寸不随浏览器变化

卡片 surface

半透明底 + backdrop-filter 模糊 + 折光边。背景渐变更丰富时材质感更强。

标签

文字可读性

次要文字走 token 安全档，busy 背景上仍保持可读。

用法

html

<link rel="stylesheet" href="https://unpkg.com/@oas-ui/theme@2/glass.css" />
<html data-glass>

data-glass 叠加在 data-theme / data-skin 之上，三者自由组合；
材质依赖背景反差——给页面一个有色彩层次的背景（渐变/图片）时质感最强，纯色同色相背景上减弱（文字仍可读）；
照片/视频等不可控 busy 背景不保证文字对比度；必要时提高 surface alpha 或在局部关闭玻璃层；
暗色档单独标定：--oas-glass-ring / -sheen / -press 比浅色低但不再压到不可感知（边缘高光、透光层次可见），模糊强度略增；亮/暗切换无需改用法；
局部降级：任意容器覆盖 --oas-glass-blur: none; --oas-glass-ring: transparent；
high-contrast 主题下不启用（实心可访问性档优先）；
系统 prefers-reduced-transparency: reduce 下回退实心 surface（关闭模糊、折光边和动态高光，保留圆角/阴影）。

动态流动感（指针镜面高光，可选运行时）

镜面高光需要一小段运行时（glass-fluid.js）——单文档 pointermove 监听 + composedPath 命中 surface，把指针位置写成元素本地坐标变量；高光样式表由运行时按注册表注入对应组件的 shadow 根（adoptedStyleSheets），因此组件源码里没有任何玻璃规则体或标记属性（只有 --oas-glass-* 变量消费行）。

html

<link rel="stylesheet" href="https://unpkg.com/@oas-ui/theme@2/glass.css" />
<script type="module">
  import 'https://unpkg.com/@oas-ui/theme@2/glass-fluid.js'
</script>
<html data-glass>

动态高光消费范围（9 个控件/导航/通知组件：button / switch / slider 把手 / app-bar / bottom-navigation / message / toast / snackbar / notification）；内容面板不接；
守卫：无 data-glass 零监听；prefers-reduced-motion: reduce 不启用；粗指针（触屏）不接；high-contrast 不启用；标记/媒体查询变化会自动起停；
可调变量（CSS 自定义属性可穿透 shadow 覆写）：--oas-glass-px / --oas-glass-py（运行时写入的指针本地坐标，勿手改）、--oas-glass-sheen / --oas-glass-sheen-size / --oas-glass-sheen-press（高光色、半径、按压色；明暗各一档，定义在 glass.css）；
高光层落在「surface 背景之上、文字之下」（isolation: isolate + 负 z-index），镜面反射不冲淡标签文字；
作用域与按压：hover 镜面高光对所有玻璃面与按钮生效（含实心语义色/自定义色按钮 primary/success/warning/danger/has-color）；实心按钮的按压改用边缘内描边（box-shadow inset，不提亮铺底）——白高光铺底会把白字对比度压到门限下，边缘描边不冲淡文字（与 Apple 镜面描边 / Fluent 内凹的按压常态一致）；玻璃面的按压仍是更强的高光色（真增强）；
对比度门禁：玻璃面 hover 按主题页面底（light #fff / dark #18181b）合成取最坏 ≥60、按压 ≥45；实心按钮 hover（瞬态大字档）≥45，其静止/按压基线（底不被提亮）≥60；半透明表面若落在极端宿主底色上，文字对比度由宿主负责；switch 轨道内文案随选中态换底，其组合矩阵不在该门禁内。
边界：指针静止时滚动页面，高光坐标不随元素位移更新（移动指针即恢复）；slider 把手高光在 overlay 态（拖动中/聚焦/show-tooltip/自定义把手 data-custom-thumb）不显示，按压环也仅在「按下未移动」时可见。

磨砂玻璃画廊 ​

用法 ​

动态流动感（指针镜面高光，可选运行时） ​

磨砂玻璃画廊

用法

动态流动感（指针镜面高光，可选运行时）