最直接方式是给body设background属性用linear-gradient()或radial-gradient()，避免额外div；注意语法规范：方向用to bottom或角度值，色标带单位，圆渐变需加circle关键字，多背景用逗号分隔并配blend-mode。
用 background 直接写渐变，别套 div 容器
HTML5 静态页加渐变背景，最直接的方式是给 常见错误是写成 写 纯 HTML5 静态页若需支持 IE9 及更早版本，得加单色回退： 或根容器设 background，不是新建一个全屏 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+ 其实不用）
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;
}
