GlassSurface 玻璃拟态
折射背后内容的玻璃容器
用法
基础
示例加载中...
参数调节
示例加载中...
最佳实践
- 只在插画、图片或渐变背景需要折射感时使用；普通卡片用
TxBaseSurface或TxCard。 - 覆盖滚动内容或图片时，显式设置
width、height与borderRadius。 - 对照真实背景调
blur、backgroundOpacity、saturation，避免背后的文字不可读。 - 大幅
distortionScale或较宽的通道偏移只用于 hero 或预览表面，不用于密集表单。 - 重要控件放进默认插槽。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | 表面宽度；数字按 px，字符串原样使用。 | ||
| height | 表面高度；数字按 px，字符串原样使用。 | ||
| borderRadius | 外层圆角（px），也用于位移图。 | ||
| borderWidth | 位移图遮罩的边缘尺寸倍率。 | ||
| brightness | 位移图内层遮罩的亮度百分比。 | ||
| opacity | 位移图内层遮罩的透明度。 | ||
| blur | 位移图遮罩的模糊半径，也是 backdrop-filter 降级路径的模糊。 | ||
| displace | RGB 位移图混合后的最终模糊（feGaussianBlur.stdDeviation）。 | ||
| backgroundOpacity | SVG 滤镜路径上的背景透明度。 | ||
| saturation | SVG 滤镜路径上的饱和度。 | ||
| distortionScale | 红、绿、蓝三张位移图的基础位移量。 | ||
| redOffset | 叠加到 distortionScale 上的红色偏移。 | ||
| greenOffset | 叠加到 distortionScale 上的绿色偏移。 | ||
| blueOffset | 叠加到 distortionScale 上的蓝色偏移。 | ||
| xChannel | 三张位移图的 X 轴取色通道。 | ||
| yChannel | 三张位移图的 Y 轴取色通道。 | ||
| mixBlendMode | 生成位移图时蓝色渐变的混合模式。 |
插槽
| 插槽名 | 参数 | 说明 |
|---|---|---|
default | - | 面板内容，在 .tx-glass-surface__content 中居中，位于滤镜层之上。 |
概述
- 按能力依次选择渲染路径：支持
backdrop-filter: url()时用 SVG 位移折射；否则用blur()毛玻璃；仍不支持时退为半透明背景加边框。 - Safari、Firefox、SSR 与没有
CSS.supports的环境不走折射路径；降级路径保留尺寸、圆角与可读性，但没有 RGB 折射。 - 位移图按实测尺寸生成，容器尺寸或光学参数变化时重算。
- 生成的 SVG 只做装饰，不可交互，位于内容层之下。
技术实现
- 三个
feDisplacementMap分别位移红、绿、蓝通道后合成，形成色散折射。 - 源码：
packages/tuffex/packages/components/src/glass-surface/。
查看源码
packages/tuffex/packages/components/src/glass-surface/index.ts