跳到主要内容

视觉表现

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

CSS中有哪些颜色表示方法？​

答案

核心概念

CSS提供了多种颜色表示方法，让开发者能够准确地定义元素的颜色值，满足不同的设计需求。

颜色表示方法

  1. 关键字颜色

    • 预定义颜色名：red、blue、green等
    • 系统颜色：transparent、currentColor

  2. 十六进制（Hex）

    • 6位格式：#ff0000（红色）
    • 3位简写：#f00（等同于#ff0000）
    • 8位格式：#ff0000ff（包含透明度）

  3. RGB/RGBA

    • RGB：rgb(255, 0, 0)
    • RGBA：rgba(255, 0, 0, 0.5)（带透明度）

  4. HSL/HSLA

    • HSL：hsl(0, 100%, 50%)（色相、饱和度、亮度）
    • HSLA：hsla(0, 100%, 50%, 0.5)（带透明度）

  5. 现代颜色语法

    • 新的RGB语法：rgb(255 0 0 / 0.5)
    • 新的HSL语法：hsl(0 100% 50% / 0.5)

代码示例

/* 关键字颜色 */
.keyword {
  color: red;
  background: transparent;
  border-color: currentColor; /* 继承文字颜色 */
}

/* 十六进制 */
.hex {
  color: #ff0000;           /* 红色 */
  background: #f00;         /* 红色简写 */
  border-color: #ff000080;  /* 带透明度 */
}

/* RGB/RGBA */
.rgb {
  color: rgb(255, 0, 0);
  background: rgba(255, 0, 0, 0.5);
  /* 新语法 */
  border-color: rgb(255 0 0 / 0.5);
}

/* HSL/HSLA */
.hsl {
  color: hsl(0, 100%, 50%);        /* 红色 */
  background: hsla(120, 100%, 50%, 0.8); /* 绿色带透明度 */
  /* 新语法 */
  border-color: hsl(240 100% 50% / 0.3); /* 蓝色带透明度 */
}

/* 实际应用 */
.theme-colors {
  --primary: #007bff;
  --success: hsl(120, 100%, 25%);
  --warning: rgb(255, 193, 7);
  --danger: rgba(220, 53, 69, 0.9);
}

颜色选择建议

场景推荐格式原因
设计稿转换Hex设计工具常用
需要透明度RGBA/HSLA支持透明度
颜色调整HSL便于调整明暗
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%
  );
}
55%