最直接方式是给body设background属性用linear-gradient()或radial-gradient()，避免额外div；注意语法规范：方向用to bottom或角度值，色标带单位，圆渐变需加circle关键字，多背景用逗号分隔并配blend-mode。
用 background 直接写渐变，别套 div 容器
HTML5 静态页加渐变背景，最直接的方式是给 <body> 或根容器设 background，不是新建一个全屏 <div> 层叠在底层——那样多一层 DOM、可能干扰点击流、还容易因 z-index 或 position 出错。
线性渐变用 linear-gradient()，径向渐变用 radial-gradient()，两者都属于 CSS background-image 的合法值，可直接赋给 background 简写属性。
linear-gradient() 参数顺序决定方向，别只靠关键词
常见错误是写成 linear-gradient(top, #fff, #000) —— 这语法已废弃，现代浏览器不认 top 这种旧关键词。必须用标准语法：
-
linear-gradient(to bottom, #fff, #000)（推荐，语义清晰） -
linear-gradient(180deg, #fff, #000)（等价，角度从正右 0deg 起算） - 起始色和结束色之间可以加中间色标，比如
linear-gradient(to right, #f00, #ff0 50%, #00f) - 别漏单位：角度必须带
deg，百分比用%，不能写50或50px
radial-gradient() 默认是椭圆，圆要显式声明 circle
写 radial-gradient(#fff, #000) 时，浏览器默认按元素宽高比例渲染椭圆渐变；如果希望是正圆（比如做中心发散光效），必须加形状关键字：
-
radial-gradient(circle, #fff, #000)（圆心在默认位置：50% 50%） -
radial-gradient(circle at top right, #fff, #000)（圆心移到右上角） -
radial-gradient(ellipse 100px 50px at center, #fff, #000)（自定义椭圆尺寸） - 多个色标支持位置偏移，如
#000 20%表示黑色在 20% 半径处出现
静态页要兼容老浏览器？加回退色和前缀（但 IE10+ 其实不用）
纯 HTML5 静态页若需支持 IE9 及更早版本，得加单色回退：
body {
background: #fff;
background: linear-gradient(to bottom, #fff, #000);
}现代项目基本不用加 -webkit- 前缀了——Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+ 全原生支持标准语法。唯一容易被忽略的是：渐变是 background-image，如果同时写了 background-color，后者会被覆盖；想叠加底色和渐变，得用逗号分隔多层背景：body {
background: #333, linear-gradient(45deg, #f00, #0f0);
background-blend-mode: overlay;
} 
