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

铬金属界面

一种高反射、硬边缘的金属界面材质，用亮带、暗部切面和工业抛光感建立记忆点。

当前状态: ReadyCr
Cr

适用场景

  • Hero 标题
  • 主按钮
  • 高级感框架

可调参数

  • highlight bands
  • contrast
  • border
  • reflection angle
  • radius

AI Prompt

生成铬金属界面表面：锐利金属渐变、黑色反射切面、细白高光和镜面边缘。

Tailwind 思路

优先用多层 linear-gradient，不依赖图片。配合紧致描边和深色环境。

性能提醒

静态渐变成本低，但不要持续动画大面积 chrome 背景。

CSS

.chrome-ui {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background:
    linear-gradient(115deg, #0b0d0f 0%, #f4f7f6 18%, #7d8588 27%, #fefefe 36%, #14171a 49%, #b8c1c4 64%, #ffffff 74%, #2b3033 100%);
  color: #050607;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 18px 50px rgba(0,0,0,.34);
}

React 示例

export function ChromeButton({ children }) {
  return <button className="chrome-ui">{children}</button>;
}