当前位置：首页 > CSS

css 制作ui质感

2026-04-02 14:12:09CSS

使用阴影和层次感

通过 box-shadow 属性添加多层阴影，模拟真实物体的光照效果。轻微的内阴影（inset）可以表现凹陷感，外阴影表现凸起感。

.button {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

渐变和光泽效果

线性渐变（linear-gradient）或径向渐变（radial-gradient）可以模拟金属或玻璃材质的光泽。结合透明度调整增强质感。

.glass-effect {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
}

边框和圆角微调

适当使用 border-radius 和细边框（border）增强柔和感。半透明边框配合背景模糊（backdrop-filter）能实现毛玻璃效果。

.card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

悬停和交互反馈

通过 transition 和 transform 添加悬停动画，例如轻微放大或阴影变化，提升动态质感。

.item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

纹理和细节叠加

使用 background-image 添加细微的噪点或条纹纹理，避免界面过于平面化。低透明度的叠加层能增加深度。

css 制作ui质感

.texture {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}