PHP页面实现垂直渐变特效技巧

本文澄清了一个常见误区：PHP本身并不处理页面视觉渐变效果，垂直渐变完全依赖CSS的`linear-gradient(to bottom, ...)`实现；PHP仅能在服务端动态输出颜色值（需严格校验防XSS），而真正的渲染、高度控制、层叠顺序及兼容性处理都属于前端范畴——掌握正确的CSS写法、避免无内容导致的高度为0、确保UTF-8无BOM编码，才是让渐变在PHP页面中稳定呈现的关键。

PHP 页面本身不处理渐变，CSS 才是关键

PHP 是服务端脚本语言，生成 HTML 后就结束了；垂直渐变是纯前端视觉效果，必须由 CSS 的 background-image 或 linear-gradient() 实现。直接在 PHP 输出的 HTML 中写内联样式或引入 CSS 即可，无需任何 PHP 函数参与。

用 linear-gradient() 实现垂直渐变背景

最常用也最可靠的方式是 CSS 线性渐变。注意方向参数：从上到下是 to bottom（等价于 180deg），不是 top to bottom（语法错误）。

<style>
body {
  background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
}
</style>

• 支持两个及以上颜色，如 linear-gradient(to bottom, #3498db, #2c3e50, #1a252f)
• 若要兼容老版 Safari，可加 -webkit-linear-gradient(top, ...) 前缀（现代项目通常不需要）
• 渐变默认铺满整个元素；若内容区域需独立渐变，别设在 body 上，改用包裹容器（如
  ）

避免常见错误：渐变不显示的几个原因

很多“PHP 页面加不上渐变”其实卡在 HTML/CSS 层面，和 PHP 无关：

• 忘记给元素设高度——body 或 html 没内容时高度为 0，渐变看不见；可加 min-height: 100vh
• 被其他 CSS 覆盖——检查是否被 background-color 或更早的 background 声明覆盖（CSS 层叠顺序很重要）
• PHP 输出了非法字符（如 UTF-8 BOM）导致浏览器解析 HTML 失败，间接让样式不生效；用编辑器确认文件编码为「UTF-8 无 BOM」
• 在 中写