背景与渐变

.solid {
  background-color: #3b82f6;
}

.transparent {
  background-color: rgba(59, 130, 246, 0.5);
}

.modern {
  background-color: oklch(0.6 0.15 250);
}

.hero {
  background-image: url('/images/hero.jpg');
}

/* 多重背景 */
.layered {
  background-image: url('/images/overlay.png'), url('/images/background.jpg');
}

.cover {
  background-size: cover;
} /* 覆盖整个容器，可能裁剪 */

.contain {
  background-size: contain;
} /* 完整显示，可能留白 */

.fixed-size {
  background-size: 200px 100px;
}

.percentage {
  background-size: 50% auto;
}

.center {
  background-position: center;
}

.top-right {
  background-position: top right;
}

.precise {
  background-position: 20px 50%;
}

/* 从边缘偏移 */
.offset {
  background-position: right 20px bottom 30px;
}

.repeat {
  background-repeat: repeat;
} /* 默认 */

.no-repeat {
  background-repeat: no-repeat;
}

.repeat-x {
  background-repeat: repeat-x;
}

.repeat-y {
  background-repeat: repeat-y;
}

.space {
  background-repeat: space;
} /* 均匀分布，不裁剪 */

.round {
  background-repeat: round;
} /* 缩放以填满 */

.scroll {
  background-attachment: scroll;
} /* 随内容滚动 */

.fixed {
  background-attachment: fixed;
} /* 相对视口固定 */

.local {
  background-attachment: local;
} /* 随元素内容滚动 */

.border-box {
  background-origin: border-box;
}

.padding-box {
  background-origin: padding-box;
} /* 默认 */

.content-box {
  background-origin: content-box;
}

.border-box {
  background-clip: border-box;
} /* 默认 */

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

/* 文字背景 */
.text-gradient {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  background: url('/images/hero.jpg') center / cover no-repeat fixed;
}

/* 从上到下 */
.gradient {
  background: linear-gradient(#3b82f6, #8b5cf6);
}

/* 指定方向 */
.to-right {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

.to-bottom-right {
  background: linear-gradient(to bottom right, #3b82f6, #8b5cf6);
}

/* 角度 */
.angle {
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
}

/* 多个颜色 */
.rainbow {
  background: linear-gradient(
    90deg,
    #ef4444,
    #f97316,
    #eab308,
    #22c55e,
    #3b82f6,
    #8b5cf6
  );
}

/* 指定位置 */
.custom-stops {
  background: linear-gradient(
    90deg,
    #3b82f6 0%,
    #3b82f6 50%,
    #8b5cf6 50%,
    #8b5cf6 100%
  );
}

/* 硬边界 */
.hard-edge {
  background: linear-gradient(90deg, #3b82f6 50%, #8b5cf6 50%);
}

/* 透明过渡 */
.fade-out {
  background: linear-gradient(to bottom, #3b82f6, transparent);
}

/* 条纹背景 */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #3b82f6,
    #3b82f6 10px,
    #2563eb 10px,
    #2563eb 20px
  );
}

/* 基本用法 */
.radial {
  background: radial-gradient(#3b82f6, #1e3a8a);
}

/* 指定形状 */
.circle {
  background: radial-gradient(circle, #3b82f6, #1e3a8a);
}

.ellipse {
  background: radial-gradient(ellipse, #3b82f6, #1e3a8a);
}

/* 指定大小 */
.closest-side {
  background: radial-gradient(circle closest-side, #3b82f6, #1e3a8a);
}

.farthest-corner {
  background: radial-gradient(circle farthest-corner, #3b82f6, #1e3a8a);
}

/* 指定位置 */
.top-left {
  background: radial-gradient(circle at top left, #3b82f6, #1e3a8a);
}

.precise {
  background: radial-gradient(circle at 30% 70%, #3b82f6, #1e3a8a);
}

.glow {
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.3),
    transparent 70%
  );
}

/* 基本用法 */
.conic {
  background: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #3b82f6);
}

/* 起始角度 */
.from-45 {
  background: conic-gradient(from 45deg, #3b82f6, #8b5cf6, #3b82f6);
}

/* 指定中心 */
.offset-center {
  background: conic-gradient(from 0deg at 30% 30%, #3b82f6, #8b5cf6, #3b82f6);
}

.pie-chart {
  background: conic-gradient(
    #3b82f6 0deg 120deg,
    #10b981 120deg 200deg,
    #f59e0b 200deg 280deg,
    #ef4444 280deg 360deg
  );
  border-radius: 50%;
}

.progress-ring {
  --progress: 75%;
  background: conic-gradient(
    #3b82f6 0%,
    #3b82f6 var(--progress),
    #e5e7eb var(--progress),
    #e5e7eb 100%
  );
  border-radius: 50%;
}

.multi-bg {
  background:
    /* 顶层 */
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    /* 图案 */ url('/images/pattern.svg') repeat,
    /* 底层 */ url('/images/background.jpg') center / cover no-repeat;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/images/hero.jpg') center / cover no-repeat fixed;
  color: white;
}

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  height: 20px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    45deg,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
  background-size: 200% 100%;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28px 0;
  }
}

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

.dots-bg {
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 20px 20px;
}

.gradient-border {
  position: relative;
  background: white;
  border-radius: 8px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  z-index: -1;
}

/* 或使用 border-image */
.border-gradient {
  border: 2px solid;
  border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1;
}

.animated-gradient {
  background: linear-gradient(270deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

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

.light-beam {
  position: relative;
  overflow: hidden;
}

.light-beam::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.1) 60deg,
    transparent 120deg
  );
  animation: rotate-beam 4s linear infinite;
}

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

/* 复杂渐变可能影响性能 */
/* 考虑使用图片替代复杂渐变 */

/* 避免在大面积或动画元素上使用复杂渐变 */
.optimized {
  /* 使用简单渐变或纯色 */
  background: linear-gradient(#3b82f6, #2563eb);
}