用CSS background-image的repeating-linear-gradient实现重复渐变图案，PHP仅动态输出安全校验后的CSS代码，避免GD绘图低效且难维护。
用 CSS background-image 实现重复渐变图案
PHP 页面本身不直接生成渐变图案，真正起作用的是输出到浏览器的 HTML + CSS。所谓“PHP 页面重复渐变”，本质是 PHP 输出含 background-image: repeating-linear-gradient(...) 的样式——PHP 只负责拼出这段 CSS，浏览器渲染。
常见错误是试图在 PHP 中用 GD 库逐像素画渐变再 tile，既慢又难维护，完全没必要。
- 渐变必须用 CSS 的
repeating-linear-gradient或repeating-radial-gradient，不是linear-gradient - 重复单位（如每 20px 一个条纹）靠颜色停止点控制，例如
to right, #000 0, #000 10px, transparent 10px, transparent 20px - PHP 中可动态插值：比如从 URL 参数读取
$_GET['step']，生成对应 CSS 字符串后内联或写入 style 标签
PHP 动态输出带变量的 repeating-gradient
适合需要根据用户输入、配置或状态切换图案节奏/颜色的场景。关键点是转义和校验，避免 CSS 注入。
示例：生成水平条纹，宽度由 $_GET['size'] 控制（只允许数字）：
立即学习“PHP免费学习笔记（深入）”；
<style>
.striped {
background-image: repeating-linear-gradient(
to right,
#3498db,
#3498db <?php echo (int)$_GET['size']; ?>px,
transparent <?php echo (int)$_GET['size']; ?>px,
transparent <?php echo (int)$_GET['size'] * 2; ?>px
);
}</style>- 必须对所有外部输入做类型转换或白名单过滤，
(int)比intval()更安全，杜绝字符串拼接漏洞 - 不要用
echo $_GET['color']直接输出颜色值，没校验会执行任意 CSS - 若需多色循环，用 PHP 数组预定义调色板，再用
array_map转成 CSS 颜色停止点
为什么不用 PHP GD 生成图片再 repeat？
有人想用 imagecreate 画一小块渐变图，再用 background-repeat: repeat。这看似直观，实际问题很多：
- 每次请求都调用 GD 函数，CPU 开销大，无法被浏览器缓存（除非额外加 header 和文件存储逻辑）
- 抗锯齿、高 DPI 屏幕下图案边缘易模糊，CSS 渐变是矢量计算，清晰度无损
- 修改颜色/角度要改 PHP 代码+重启 Web 服务；CSS 方案改一行样式就能热更新
- 移动端缩放时，GD 图片会失真，CSS 渐变自动适配
兼容性与 fallback 处理
repeating-linear-gradient 在 IE10+、Edge、Chrome 26+、Firefox 16+ 均支持。但旧安卓 WebView（4.3 及更早）可能不识别 to right 写法。
- 稳妥写法用角度：把
to right换成90deg，兼容性更好 - 需要支持 IE9 及以下？只能降级为单色背景或 base64 编码的 PNG 小图（用 PHP 生成一次并缓存）
- 不要依赖
@supports做复杂检测——简单页面直接用现代语法，复杂项目才值得加 JS 检测 + class 切换
最常被忽略的是单位一致性：CSS 中所有长度必须带单位（10px，不能写 10），PHP 拼接时容易漏掉，导致整条规则失效。
