阿卡不拉

Appearance

渐变 👌 ​

渐变是 CSS 中第一次真正意义上使用纯 CSS 代码创建的图像。它可以应用在任何需要使用图像的场景，为网页设计提供了丰富的视觉效果。

渐变可以应用的属性：

  • border-image - 边框图像
  • background-image - 背景图像
  • mask-image - 遮罩图像
  • list-style-image - 列表样式图像

1. 线性渐变 linear-gradient ​

线性渐变沿着一条直线在两个或多个颜色之间创建平滑过渡。

1.1 基本语法 ​

css
linear-gradient(渐变方向, 颜色1 变化区间, 颜色2 变化区间, ..., 颜色n 变化区间)

1.2 渐变方向 ​

关键字方向：

  • to top - 从下到上
  • to bottom - 从上到下（默认值）
  • to left - 从右到左
  • to right - 从左到右
  • to top left - 从右下到左上
  • to top right - 从左下到右上
  • to bottom left - 从右上到左下
  • to bottom right - 从左上到右下

角度方向：

  • 0deg = to top
  • 90deg = to right
  • 180deg = to bottom（默认）
  • 270deg = to left

1.3 变化区间（渐变断点） ​

  • 一个值：作为颜色变化的边界点
  • 两个值：作为区间的开始和终止位置
  • 单位：可以使用 px、%、em、rem 等

提示

渐变区间的大小指的是在渐变方向上的距离

渐变-1

1.4 重复线性渐变 ​

使用 repeating-linear-gradient() 可以创建重复的线性渐变模式。

css
/* 基础线性渐变示例 */
.gradient-basic {
  background-image: linear-gradient(
    45deg,
    #fff 100px,
    skyblue 100px 200px,
    #fff 200px
  );
}

/* 多色渐变 */
.gradient-multi {
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff
  );
}

/* 角度渐变 */
.gradient-angle {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

1.5 线性渐变实际应用 ​

1.5.1 网格背景 ​

通过组合两个重复线性渐变创建网格效果：

css
.grid-background {
  width: 490px;
  height: 490px;
  margin: 10px auto;
  background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 10px,
      rgba(255, 170, 204, 0.5) 10px 20px
    ), repeating-linear-gradient(to right, transparent 0 10px, rgba(
          135,
          206,
          235,
          0.5
        ) 10px 20px);
}

1.5.2 交织边框 ​

使用 border-image 创建动态边框效果：

css
.woven-border {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  border: 10px solid;
  border-image: repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      #87ceeb 10px 20px
    ) 20;
}

1.5.3 按钮渐变效果 ​

css
.gradient-button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

2. 径向渐变 radial-gradient ​

径向渐变从一个中心点向外辐射，在两个或多个颜色之间创建圆形或椭圆形的平滑过渡。

2.1 基本语法 ​

css
radial-gradient(形状 半径大小 at 原点位置, 渐变颜色1 边界, 渐变颜色2 边界, ...)

渐变-2

2.2 渐变原点位置 ​

关键字位置：

  • center（默认值）- 中心位置
  • top、bottom、left、right - 边缘位置
  • 可组合：top left、bottom right 等

具体位置：

  • at 0 0 - 左上角
  • at 50% 50% - 中心（等同于 center）
  • at left 20px top 30px - 距离左边 20px，顶部 30px

2.3 渐变形状 ​

  • circle - 圆形渐变
  • ellipse - 椭圆形渐变（默认值）

2.4 半径大小 ​

数值方式：

  • 一个值：创建圆形渐变，半径为该值
  • 两个值：创建椭圆形渐变（水平半径 垂直半径）

关键字方式：

关键字描述
closest-side渐变中心距离容器最近的边作为终止位置
closest-corner渐变中心距离容器最近的角作为终止位置
farthest-side渐变中心距离容器最远的边作为终止位置
farthest-corner默认值。渐变中心距离容器最远的角作为终止位置

渐变-3

2.5 重复径向渐变 ​

使用 repeating-radial-gradient() 可以创建重复的径向渐变模式。

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

/* 椭圆渐变 */
.radial-ellipse {
  background-image: radial-gradient(
    ellipse 100px 50px at center,
    #ffff00,
    #ff00ff
  );
}

/* 重复径向渐变 */
.radial-repeating {
  background-image: repeating-radial-gradient(
    circle at center,
    #ff0000 0px 10px,
    #0000ff 10px 20px
  );
}

2.6 径向渐变实际应用 ​

2.6.1 聚光灯效果 ​

css
.spotlight {
  width: 500px;
  height: 300px;
  background-color: #000;
  background-image: radial-gradient(
    circle 150px at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
}

2.6.2 水波纹效果 ​

css
.ripple-effect {
  width: 400px;
  height: 400px;
  background-image: repeating-radial-gradient(
    circle at center,
    transparent 0px,
    transparent 20px,
    rgba(0, 150, 255, 0.3) 22px,
    rgba(0, 150, 255, 0.3) 24px
  );
}

2.6.3 球体效果 ​

css
.sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: radial-gradient(
    ellipse 60px 40px at 40% 30%,
    #ffffff,
    #4169e1 70%,
    #000080
  );
}

3. 锥形渐变 conic-gradient (/ˈkɒnɪk/) ​

锥形渐变围绕一个中心点旋转，创建圆锥形的颜色过渡效果。这是 CSS3 中最新的渐变类型。

3.1 基本语法 ​

css
conic-gradient(from 起始角度 at 中心位置, 角渐变断点)

渐变-4

3.2 参数说明 ​

起始角度：

  • from 0deg - 从顶部开始（默认）
  • from 45deg - 从 45 度角开始
  • from 90deg - 从右侧开始

中心位置：

  • 同径向渐变的位置语法
  • at center（默认）、at top left 等

角渐变断点：

  • 可以只提供颜色，系统自动分配角度
  • 可以指定具体角度：red 0deg, blue 90deg
  • 支持百分比：red 0%, blue 25%

3.3 重复锥形渐变 ​

使用 repeating-conic-gradient() 创建重复的锥形渐变。

css
/* 基础锥形渐变 */
.conic-basic {
  background-image: conic-gradient(
    from 0deg,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

/* 指定角度的锥形渐变 */
.conic-angles {
  background-image: conic-gradient(
    from 45deg at center,
    #ff0000 0deg,
    #ffff00 60deg,
    #00ff00 120deg,
    #00ffff 180deg,
    #0000ff 240deg,
    #ff00ff 300deg,
    #ff0000 360deg
  );
}

3.4 锥形渐变实际应用 ​

3.4.1 棋盘格图案 ​

通过重复的锥形渐变创建棋盘格效果：

css
.checkerboard {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-size: 25px 25px;
  background-image: conic-gradient(
    at center,
    #ffffff 0deg 90deg,
    #000000 90deg 180deg,
    #ffffff 180deg 270deg,
    #000000 270deg 360deg
  );
}

3.4.2 色相盘（颜色选择器） ​

创建完整的 HSL 色相环：

css
.color-wheel {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border-radius: 50%;
  background-image: conic-gradient(
    from 0deg at center,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

3.4.3 进度环 ​

创建圆形进度指示器：

css
.progress-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: conic-gradient(
    from -90deg at center,
    #4caf50 0deg,
    #4caf50 252deg,
    /* 70% progress */ #e0e0e0 252deg,
    #e0e0e0 360deg
  );
  position: relative;
}

.progress-ring::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: white;
  border-radius: 50%;
}

3.4.4 雷达扫描效果 ​

css
.radar-scan {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: conic-gradient(
    from 0deg at center,
    transparent 0deg,
    rgba(0, 255, 0, 0.8) 30deg,
    rgba(0, 255, 0, 0.4) 60deg,
    transparent 90deg,
    transparent 360deg
  );
  animation: radar-rotate 2s linear infinite;
}

@keyframes radar-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

4. 渐变技巧与最佳实践 ​

4.1 性能优化 ​

css
/* 避免过于复杂的渐变 */
.optimized-gradient {
  /* 好的做法：简单的双色渐变 */
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.complex-gradient {
  /* 避免：过多颜色停止点 */
  background-image: linear-gradient(
    45deg,
    #ff0000 0%,
    #ff3300 5%,
    #ff6600 10%,
    #ff9900 15%,
    #ffcc00 20%,
    #ffff00 25%,
    #ccff00 30%,
    #99ff00 35% /* ... 更多颜色 */
  );
}

4.2 兼容性处理 ​

css
.gradient-fallback {
  /* 降级方案：纯色背景 */
  background-color: #667eea;

  /* 现代浏览器：渐变背景 */
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

4.3 响应式渐变 ​

css
.responsive-gradient {
  background-image: linear-gradient(45deg, #667eea, #764ba2);
}

@media (max-width: 768px) {
  .responsive-gradient {
    background-image: linear-gradient(to bottom, #667eea, #764ba2);
  }
}

注意事项

  1. 渐变是图像，不是颜色，因此不能用于 color 属性
  2. 过多的颜色停止点会影响性能
  3. 在移动设备上，复杂渐变可能导致渲染性能问题
  4. 始终提供降级方案以确保兼容性

实用技巧

  1. 使用在线渐变生成器快速创建复杂效果
  2. 结合 CSS 动画可以创建动态渐变效果
  3. 利用 CSS 变量可以轻松切换渐变主题
  4. 渐变可以与其他 CSS 特性（如滤镜、混合模式）结合使用