Physical / Industrial
碳纤维
一种深色技术织纹材质,让界面带有性能、硬件或工程气质。
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>;
}