HTML中如何使用repeating-gradient创建重复渐变条纹-html教程-PHP中文网

repeating-gradient 是 css 中自动平铺基础渐变的函数，需用相对单位或显式周期长度（如20px）定义单次重复；等宽双色条纹须颜色停靠点紧邻重叠（如#fff 10px, #000 10px），配合 background-size 可解耦控制密度与缩放。

html中如何使用repeating-gradient创建重复渐变条纹

repeating-gradient 语法和基本写法

repeating-gradient 是 CSS 渐变函数之一，本质是让一段基础渐变自动平铺重复，不用手动写多段 linear-gradient 拼接。它和 linear-gradient 用法高度相似，但关键区别在于：你只需定义「一个周期内」的颜色停靠点，浏览器会自动计算重复间距。

常见错误是照搬 linear-gradient 的写法，把颜色停靠点设成绝对长度（比如 0%, 20px, 40px），结果条纹宽窄失控。正确做法是用相对单位或明确周期长度：

使用百分比时，整个声明默认按「单次重复的总长度」归一化（即 100% = 一个条纹周期）
更稳妥的是显式指定周期长度，比如 repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 20px) —— 这里 20px 就是完整周期宽度

注意：repeating-radial-gradient 同理，但径向重复对齐更难控，条纹场景几乎只用线性版本。

实现等宽双色条纹的典型模式

最常用需求：黑白/灰白等宽条纹，类似斑马线。核心是让两种颜色各占一半周期，且边界硬切（无过渡）：

颜色停靠点必须「紧邻重叠」，比如 #fff 0, #fff 50%, #000 50%, #000 100%
或用像素写法更直观：#fff 0, #fff 10px, #000 10px, #000 20px

background: repeating-linear-gradient(
  90deg,
  #fff 0,
  #fff 10px,
  #000 10px,
  #000 20px
);

要点：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

- 90deg 表示水平条纹（从左到右），0deg 才是垂直条纹（从上到下） - 第二、三停靠点数值相同（如 10px），才能实现硬边切换；如果写成 #fff 10px, #000 11px，中间会多出 1px 过渡带 - 周期总长由最后一项决定（这里是 20px），所有后续重复都按此缩放

调整条纹方向、密度和兼容性

条纹密度直接由周期长度控制：数值越小，条纹越密。但要注意实际渲染效果受元素尺寸和缩放影响：

在高 DPI 屏幕上，1px 条纹可能被模糊或跳过，建议最小用 2px
repeating-gradient 在 Safari 15.4+ 和 Chrome 10+ 支持良好，但旧版 iOS Safari 对负角度或复杂色标支持不稳定

常见调整方式：

- 垂直条纹：把 90deg 换成 0deg，或直接写 to bottom - 斜向条纹：用 45deg，但需注意斜向周期在矩形容器中会因宽高比产生错位，此时建议用 background-size 显式约束平铺单元，例如 background-size: 20px 20px - 半透明叠加：在颜色值中使用 rgba() 或十六进制带 alpha（如 #0008），但 IE 完全不支持，Edge 17+ 才开始支持带透明度的渐变

与 background-size 配合控制整体节奏

repeating-gradient 本身定义的是「单个渐变图像」的内部结构，而 background-size 决定这个图像如何平铺到元素上。两者配合能解耦设计：

如果只改条纹宽窄，优先调渐变里的像素值（如 10px/20px → 5px/10px）
如果想保持条纹比例不变，但整体缩放（比如响应式中随容器变大而变粗），就用 background-size: 20px 20px 控制平铺块大小，渐变内部仍写 0%, 50%, 50%, 100%

容易忽略的一点：

- 当同时设置 background-image（含 repeating-gradient）和 background-size 时，后者仅作用于该层渐变，不影响其他背景图层 - 若渐变作为多层背景之一（比如叠加在图片上），记得用逗号分隔，并确保 background-size 的值数量与图层数匹配，否则会 fallback 到默认行为

条纹类设计看着简单，但像素级对齐、跨设备清晰度、多层背景缩放一致性，这几个地方最容易在上线后才发现问题。