用CSS background的linear-gradient实现渐变，无需PHP参与；需校验颜色值防XSS，推荐CSS变量或预设class控制动态色；避免PHP生成SVG/Canvas。
直接用 CSS 的 background 实现最简单
PHP 页面本身不处理视觉效果，线性渐变是前端渲染行为，所以不需要 PHP 逻辑参与。只要在 HTML 的 <style></style> 或外部 CSS 文件里写对 background 值即可生效。
常见错误是试图用 PHP echo 一堆 CSS 字符串拼接渐变值，既难维护又易出错。正确做法是把渐变写死在样式中，或通过 PHP 动态输出 class 名，再由 CSS 控制样式。
- 推荐写法：
background: linear-gradient(135deg, #ff9a9e, #fad0c4); - 方向可选：
to right、to bottom、45deg等，角度值更精确 - 颜色支持十六进制、rgb()、hsl()、甚至透明色如
rgba(255, 154, 158, 0.8) - 若需兼容老浏览器（IE10 以下），得加
-ms-linear-gradient前缀，但基本已无必要
PHP 动态控制渐变色时怎么安全传参
当渐变色需要根据 PHP 变量（比如用户主题配置）变化时，不能直接把变量插进 属性里，否则有 XSS 风险。
- 必须对颜色值做白名单校验：只允许
^#[0-9a-fA-F]{3,6}$或^rgb\(\d+,\s*\d+,\s*\d+\)$格式 - 避免用
echo "style='background: linear-gradient(..., {$color});'"这种裸输出 - 更稳妥方式：PHP 输出一个 class 名（如
theme-gradient-blue），CSS 中预先定义好对应渐变 - 示例：
<div class="bg-container <?= htmlspecialchars($themeClass) ?>">，然后 CSS 写 <code>.theme-gradient-blue { background: linear-gradient(to right, #4facfe, #00f2fe); }用 JavaScript 补充动态切换渐变（非必需但灵活）
如果要点击按钮实时换渐变、或响应滚动/时间变化，就得靠 JS。PHP 只负责首次渲染初始值，后续交互交给前端。
立即学习“PHP免费学习笔记（深入）”；
- 用
element.style.background设置时，注意字符串要完整包含linear-gradient(...) - 别漏掉浏览器前缀：现代浏览器可忽略，但若需支持 Safari 旧版，得同时设
webkitLinearGradient - 性能提示：频繁修改
background不会触发重排，但大量元素同时动画仍建议用will-change: background或改用background-image配合 CSS 变量 - CSS 变量方案更优雅：
:root { --grad-start: #ff9a9e; --grad-end: #fad0c4; }，JS 改document.documentElement.style.setProperty('--grad-start', newColor)
为什么不用 PHP 生成 SVG 或 Canvas 渐变
有人尝试用 PHP 输出 SVG 字符串或 base64 编码的渐变图，这完全没必要，且引入额外复杂度和性能开销。
- SVG 渐变需定义
<defs><lineargradient></lineargradient></defs>，再用fill="url(#grad)"引用，PHP 拼写极易出错 - Canvas 方案需输出 JS 初始化代码 +
createLinearGradient()调用，PHP 无法直接操作画布上下文 - 所有这些都绕过了浏览器原生
linear-gradient()的硬件加速能力，渲染效率更低 - 唯一合理使用场景：需要服务端生成固定渐变图作背景贴图（如导出海报），此时才用 GD 或 Imagick
135deg，不是45deg。 - 用
