<p>用 CSS linear-gradient 实现对角渐变背景需指定角度（如 135deg）或关键词（to bottom right），至少两个色值，并配 background-size: cover；内联或外链均可，动态颜色可用 PHP echo 插入；IE9- 需 fallback 背景色；注意容器高度与作用范围。</p>
用 CSS linear-gradient 实现对角渐变背景
PHP 页面本身不处理视觉效果，真正起作用的是嵌入的 CSS。对角渐变必须用 linear-gradient 配合角度值（如 135deg）或关键词（如 to bottom right），直接写在 background 或 background-image 里即可。
常见错误是写成 background: gradient(...)（漏掉 linear- 前缀）或角度用错（比如写 45 不加 deg 单位，部分浏览器会忽略）。
-
to bottom right最直观，兼容性好，推荐新手优先用 - 角度值更精确：
135deg= 左上→右下，45deg= 左下→右上 - 渐变色至少写两个色值，例如
linear-gradient(to bottom right, #fff, #000) - 别忘了加
background-size: cover或100% 100%，否则可能只渐变一小块
在 PHP 页面中内联写法 vs 外链 CSS
PHP 文件本质是输出 HTML，所以渐变样式可以写在 <style> 标签里（内联），也可以放在外链 CSS 中。内联适合快速验证，但不利于复用和维护；外链更规范，尤其当多个 PHP 页面共用同一套 UI 时。
注意：如果 PHP 输出了 Content-Type: text/html 之外的类型（比如 JSON 接口页），加样式没意义——它根本不会被浏览器渲染为页面。
立即学习“PHP免费学习笔记（深入）”；
- 内联示例：
<style> body { background: linear-gradient(to bottom right, #e6f7ff, #b3d1ff); } </style> - 外链写法：
<link rel="stylesheet" href="style.css">
，然后在style.css里写对应规则 - 若 PHP 动态生成颜色（如根据用户等级换渐变色），可用
echo插入变量：background: linear-gradient(to bottom right, <?php echo $color1; ?>, <?php echo $color2; ?>);
IE 兼容性问题与 fallback 方案
IE10+ 支持标准 linear-gradient，但 IE9 及以下完全不支持，会显示空白或默认背景色。如果业务仍需兼容老 IE，必须提供 fallback。
不要依赖 JS 检测后动态插入样式——太慢且不可靠。稳妥做法是用 CSS 的「层叠覆盖」逻辑，先写兜底色，再写渐变（现代浏览器会覆盖前面的）：
- 正确顺序：
div { background: #f0f0f0; /* fallback for IE8- */ background: linear-gradient(135deg, #f0f0f0, #ccc); } - 避免用
-ms-filter模拟渐变（性能差、锯齿严重、不支持多色） - 如果项目已弃用 IE9 及以下，可忽略此节，但上线前建议用 BrowserStack 确认目标用户环境
渐变区域控制：全屏？容器？伪元素？
很多人以为“加渐变”就是给 body 加，结果发现滚动时背景不动、文字盖不住、或被其他元素遮挡。关键在于明确作用范围：
- 全屏固定背景：
body { background: linear-gradient(...) fixed; height: 100vh; margin: 0; } - 仅内容区渐变：给具体容器（如
<main>或<div class="hero">）设背景，同时确保它有高度（min-height: 100vh或height: 100%） - 避免用
::before伪元素叠加渐变（除非需要遮罩或混合模式），否则易引发 z-index 和点击穿透问题 - 移动端要注意：iOS Safari 对
background-attachment: fixed支持不稳定，慎用
实际生效与否，取决于你最终渲染出的 HTML 是否被浏览器解析为带样式的 DOM 节点——PHP 只是生成器，别在它身上找“渐变函数”。最容易被忽略的是：忘记给容器设高度，或者渐变色对比度过低导致看起来像没生效。
