Web学习网站

Appearance

CSS 渐变 ​

CSS 渐变是一种在两个或多个颜色之间平滑过渡的图像。它们可以用于背景、边框等任何可以使用图像的地方，为网页设计增添丰富的视觉效果。

渐变类型 ​

线性渐变 (Linear Gradient) ​

线性渐变沿着一条直线创建颜色过渡。

基本语法 ​

css
.element {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

方向控制 ​

css
/* 使用关键词指定方向 */
.to-right {
  background: linear-gradient(to right, red, blue);
}

.to-bottom {
  background: linear-gradient(to bottom, red, blue); /* 默认方向 */
}

.to-top-right {
  background: linear-gradient(to top right, red, blue);
}

/* 使用角度指定方向 */
.angle-45 {
  background: linear-gradient(45deg, red, blue);
}

.angle-90 {
  background: linear-gradient(90deg, red, blue); /* 等同于 to right */
}

颜色停止点 ​

css
/* 默认等间距分布 */
.simple {
  background: linear-gradient(red, yellow, blue);
}

/* 指定颜色停止点位置 */
.custom-stops {
  background: linear-gradient(red 0%, yellow 50%, blue 100%);
}

/* 多个颜色停止点 */
.complex-stops {
  background: linear-gradient(
    red 0%,
    orange 20%,
    yellow 40%,
    green 60%,
    blue 80%,
    purple 100%
  );
}

/* 硬边过渡 */
.hard-stops {
  background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
}

径向渐变 (Radial Gradient) ​

径向渐变从一个中心点向外创建圆形或椭圆形的颜色过渡。

基本语法 ​

css
.element {
  background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}

形状和大小 ​

css
/* 圆形渐变 */
.circle {
  background: radial-gradient(circle, red, blue);
}

/* 椭圆形渐变（默认） */
.ellipse {
  background: radial-gradient(ellipse, red, blue);
}

/* 指定大小 */
.size-farthest-corner {
  background: radial-gradient(circle farthest-corner, red, blue);
}

.size-closest-side {
  background: radial-gradient(circle closest-side, red, blue);
}

.size-farthest-side {
  background: radial-gradient(circle farthest-side, red, blue);
}

.size-closest-corner {
  background: radial-gradient(circle closest-corner, red, blue);
}

位置控制 ​

css
/* 指定中心点 */
.center-at-30-70 {
  background: radial-gradient(circle at 30% 70%, red, blue);
}

/* 使用关键词 */
.center-at-top {
  background: radial-gradient(circle at top, red, blue);
}

.center-at-right {
  background: radial-gradient(circle at right, red, blue);
}

/* 偏移中心 */
.offset-center {
  background: radial-gradient(circle at 20px 30px, red, blue);
}

圆锥渐变 (Conic Gradient) ​

圆锥渐变围绕中心点按色相创建颜色过渡。

基本语法 ​

css
.element {
  background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);
}

角度和位置 ​

css
/* 基本圆锥渐变 */
.basic {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* 指定起始角度 */
.from-45 {
  background: conic-gradient(from 45deg, red, blue);
}

/* 指定中心点 */
.at-center {
  background: conic-gradient(at 50% 50%, red, blue);
}

/* 指定颜色停止点 */
.custom-stops {
  background: conic-gradient(
    red 0deg,
    yellow 90deg,
    lime 180deg,
    blue 270deg,
    red 360deg
  );
}

重复渐变 ​

重复线性渐变 ​

css
.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

重复径向渐变 ​

css
.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

重复圆锥渐变 ​

css
.repeating-conic {
  background: repeating-conic-gradient(
    red 0deg,
    red 30deg,
    blue 30deg,
    blue 60deg
  );
}

实际应用示例 ​

彩虹背景 ​

html
<div class="rainbow-bg">彩虹背景</div>
css
.rainbow-bg {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  padding: 20px;
  text-align: center;
  color: white;
  font-weight: bold;
}

径向光晕效果 ​

html
<div class="radial-glow">光晕效果</div>
css
.radial-glow {
  background: radial-gradient(
    circle at center,
    rgba(52, 152, 219, 0.8),
    rgba(52, 152, 219, 0.4),
    rgba(52, 152, 219, 0)
  );
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

条纹背景 ​

html
<div class="striped-bg">条纹背景</div>
css
.striped-bg {
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
  padding: 20px;
  text-align: center;
  color: white;
  font-weight: bold;
}

圆锥渐变时钟 ​

html
<div class="conic-clock">时钟效果</div>
css
.conic-clock {
  background: conic-gradient(
    #3498db 0deg,
    #3498db 30deg,
    #2ecc71 30deg,
    #2ecc71 60deg,
    #f1c40f 60deg,
    #f1c40f 90deg,
    #e74c3c 90deg,
    #e74c3c 120deg
  );
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

渐变按钮 ​

html
<button class="gradient-button">渐变按钮</button>
css
.gradient-button {
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gradient-button:hover {
  background: linear-gradient(to right, #2980b9, #3498db);
  transform: translateY(-2px);
}

渐变文本 ​

html
<h1 class="gradient-text">渐变文本</h1>
css
.gradient-text {
  background: linear-gradient(to right, #3498db, #2ecc71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
}

渐变边框 ​

html
<div class="gradient-border">渐变边框</div>
css
.gradient-border {
  position: relative;
  padding: 20px;
  text-align: center;
  background: white;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  z-index: -1;
  border-radius: 4px;
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

浏览器兼容性 ​

  • 线性渐变: IE10+ 支持
  • 径向渐变: IE10+ 支持
  • 圆锥渐变: 较新的浏览器支持
  • 重复渐变: IE10+ 支持

最佳实践 ​

  1. 性能考虑：复杂的渐变可能影响渲染性能
  2. 可访问性：确保渐变背景上的文本有足够的对比度
  3. 渐进增强：为不支持渐变的浏览器提供备选颜色
  4. 测试兼容性：在目标浏览器中测试渐变效果
  5. 合理使用：避免过度使用渐变，保持设计简洁

总结 ​

CSS 渐变为网页设计提供了强大的视觉效果工具。通过掌握线性渐变、径向渐变和圆锥渐变的使用方法，可以创建丰富多彩的背景、按钮、文本效果等。合理使用渐变可以显著提升网页的视觉吸引力，但也要注意性能和可访问性方面的考虑。