CSS线性渐变生成器

• 渐变效果预览：从左向右，由温暖的橙色(#ff7a59)平滑过渡到浅杏色(#ffbc99)的线性渐变，层次柔和、现代感强。

• CSS代码：

/* 可复用的线性渐变背景（左→右） */
.gradient-linear-right {
  /* 基础回退色（不支持渐变的老旧浏览器） */
  background-color: #ff7a59;

  /* 旧版 WebKit（Safari 5.1–6、Android 4.0–4.3） */
  background-image: -webkit-linear-gradient(left, #ff7a59 0%, #ffbc99 100%);

  /* 标准语法（现代浏览器） */
  background-image: linear-gradient(to right, #ff7a59 0%, #ffbc99 100%);
}

• 使用说明：

  • 将类名 gradient-linear-right 添加到需要应用渐变的元素上，例如容器、按钮、标题栏等。
  • 声明顺序已按兼容性从旧到新排列：最后的标准语法会在现代浏览器中生效；不支持标准语法但支持旧 WebKit 的浏览器会使用 -webkit- 版本；更老的浏览器则退回到纯色 background-color。
  • 渐变是矢量渲染，不会失真，适用于响应式布局。若在渐变上叠加文字，请确保文字与背景的对比度充足以保证可读性。

• 兼容性提示：

  • Chrome 26+、Firefox 16+、Edge 12+、Safari 6.1+、iOS Safari 7+、Android 4.4+：原生支持标准语法。
  • Safari 5.1–6、Android 4.0–4.3：使用 -webkit-linear-gradient 前缀可正常显示。
  • IE 10+：支持标准语法；IE 9 仅显示回退的纯色背景。

渐变效果预览
垂直方向（to bottom）的重复线性渐变，从纯白 rgb(255,255,255) 过渡到浅灰 rgb(242,242,242)，以柔和的条纹节奏重复，整体观感轻盈、不刺眼，适合作为页面背景、卡片或标题栏的细腻纹理。

CSS代码

/* 示例：应用于需要渐变背景的容器 */
.gradient-bg {
  /* 1) 最基础回退色：在不支持任何渐变的浏览器中显示纯白 */
  background-color: #ffffff;

  /* 2) 回退线性渐变：在不支持 repeating 的浏览器（如 IE）显示单次线性渐变 */
  background-image: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(242, 242, 242)
  );

  /* 3) 旧版 WebKit 前缀（如老版 Safari/Android WebKit） */
  background-image: -webkit-repeating-linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0px,
    rgb(242, 242, 242) 12px,
    rgb(255, 255, 255) 24px
  );

  /* 4) 标准语法：repeating-linear-gradient */
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0px,
    rgb(242, 242, 242) 12px,
    rgb(255, 255, 255) 24px
  );
}

使用说明

• 直接将 .gradient-bg 类应用在需要渐变背景的元素上，如页面主体、卡片或标题栏。
• 条纹节距由色标位置控制：上述示例中从 0px→12px→24px 完成一个“白→灰→白”的循环，整体周期为 24px。
  • 增大数值（如 20px/40px）= 条纹更宽、更柔和
  • 减小数值（如 8px/16px）= 条纹更密集
• 色彩已使用有效的 CSS rgb() 格式，方向为 to bottom（从上到下），符合标准语法。
• 如用作整页背景，建议作用于 body 或主容器；可结合背景叠加色或内容留白，避免与文字对比不足。

兼容性提示

• 标准的 repeating-linear-gradient：现代主流浏览器（Chrome、Firefox、Safari、Edge 的近年版本）均良好支持。
• 旧版 WebKit 浏览器：提供了 -webkit- 前缀以提升兼容性。
• Internet Explorer（IE 10/11）：不支持 repeating-linear-gradient，将回退到非重复的 linear-gradient 显示。
• 为确保最广泛兼容，代码已按“纯色 → 非重复渐变 → 前缀重复渐变 → 标准重复渐变”的顺序提供多级回退。