视觉表现✅

本主题涵盖CSS视觉效果相关技术，包括颜色、阴影、渐变、滤镜等视觉样式。

如何实现CSS阴影效果？

答案

核心概念

CSS阴影效果包括盒子阴影（box-shadow）和文字阴影（text-shadow），能够为元素添加立体感和层次感。

盒子阴影（box-shadow）

语法：box-shadow: h-offset v-offset blur spread color inset

• h-offset：水平偏移量
• v-offset：垂直偏移量
• blur：模糊半径（可选）
• spread：扩散半径（可选）
• color：阴影颜色（可选）
• inset：内阴影（可选）

文字阴影（text-shadow）

语法：text-shadow: h-offset v-offset blur color

代码示例

/* 基础盒子阴影 */
.basic-shadow {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* 多重阴影 */
.multiple-shadow {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/* 内阴影 */
.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 发光效果 */
.glow {
  box-shadow: 0 0 20px #007bff;
}

/* 立体按钮效果 */
.button-3d {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button-3d:hover {
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 文字阴影 */
.text-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 文字发光 */
.text-glow {
  text-shadow: 0 0 10px #00ff00;
}

/* 立体文字 */
.text-3d {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa,
    4px 4px 0 #999;
}

常见阴影模式

/* Material Design阴影 */
.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }

/* 卡片阴影 */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 模态框阴影 */
.modal {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

如何实现CSS渐变效果？

答案

核心概念

CSS渐变允许在两个或多个指定颜色之间显示平滑的过渡，包括线性渐变和径向渐变。

线性渐变（linear-gradient）

语法：linear-gradient(direction, color1, color2, ...)

径向渐变（radial-gradient）

语法：radial-gradient(shape size at position, color1, color2, ...)

圆锥渐变（conic-gradient）

语法：conic-gradient(from angle at position, color1, color2, ...)

代码示例

/* 基础线性渐变 */
.linear-basic {
  background: linear-gradient(to right, #ff0000, #0000ff);
}

/* 多色线性渐变 */
.linear-multi {
  background: linear-gradient(
    45deg,
    #ff0000 0%,
    #ffff00 25%,
    #00ff00 50%,
    #00ffff 75%,
    #0000ff 100%
  );
}

/* 基础径向渐变 */
.radial-basic {
  background: radial-gradient(circle, #ff0000, #0000ff);
}

/* 椭圆径向渐变 */
.radial-ellipse {
  background: radial-gradient(
    ellipse at center,
    #ff0000 0%,
    #ffff00 50%,
    #0000ff 100%
  );
}

/* 圆锥渐变 */
.conic-basic {
  background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  border-radius: 50%;
}

/* 重复渐变 */
.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #0000ff 10px,
    #0000ff 20px
  );
}

/* 实际应用案例 */
.button-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  transition: transform 0.2s;
}

.button-gradient:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 文字渐变 */
.text-gradient {
  background: linear-gradient(45deg, #ff0000, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 边框渐变 */
.border-gradient {
  border: 3px solid;
  border-image: linear-gradient(45deg, #ff0000, #0000ff) 1;
}

渐变技巧

/* 渐变动画 */
.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 渐变遮罩 */
.image-overlay {
  position: relative;
}

.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
}