返回地图
Physical / Industrial

碳纤维

一种深色技术织纹材质,让界面带有性能、硬件或工程气质。

当前状态: ReadyCx
Cx

适用场景

  • AI 仪表盘
  • 性能型产品
  • 硬件页面

可调参数

  • weave scale
  • contrast
  • shine
  • angle
  • base color

AI Prompt

生成碳纤维 UI 材质:深色对角编织、低调高光、技术精度,并保证前景文字有足够对比。

Tailwind 思路

使用交叉 repeating-linear-gradient,小尺度、低对比。

性能提醒

小面积 repeating-gradient 没问题;避免全页铺高频纹理。

CSS

.carbon-fiber {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
    repeating-linear-gradient(45deg, #101414 0 4px, #050707 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px);
  border: 1px solid rgba(255,255,255,.12);
  color: #e9f2ef;
}

React 示例

export function CarbonFiberPanel({ children }) {
  return <div className="carbon-fiber">{children}</div>;
}