h5渐变实现

线性渐变

使用CSS的linear-gradient函数可以创建线性渐变效果。该函数需要指定渐变方向（角度或关键词）和颜色断点。

background: linear-gradient(to right, #ff9966, #ff5e62);

方向关键词包括to top、to bottom、to left、to right，也可以使用角度值如45deg。颜色断点可以设置多个，并指定位置：

background: linear-gradient(45deg, #ff9966 0%, #ff5e62 100%);

径向渐变

使用radial-gradient函数创建从中心向外扩散的渐变效果。可以指定形状（圆形或椭圆）和大小。

background: radial-gradient(circle at center, #ff9966, #ff5e62);

参数circle可替换为ellipse，at center可调整中心位置。支持设置颜色分布：

background: radial-gradient(circle farthest-side at 30% 50%, #ff9966, #ff5e62);

重复渐变

repeating-linear-gradient和repeating-radial-gradient可实现重复渐变图案。

background: repeating-linear-gradient(
  45deg,
  #ff9966,
  #ff9966 10px,
  #ff5e62 10px,
  #ff5e62 20px
);

多背景叠加

通过逗号分隔多个渐变可实现复杂效果：

background: 
  linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
  radial-gradient(circle, #ff9966, #ff5e62);

浏览器兼容性

现代浏览器均支持渐变属性。对于旧版浏览器可添加前缀：

background: -webkit-linear-gradient(left, #ff9966, #ff5e62);
background: -moz-linear-gradient(left, #ff9966, #ff5e62);
background: linear-gradient(to right, #ff9966, #ff5e62);