渐变 xxx-gradient

渐变实验网站

Gradient CSS Generator

官方文档

线性渐变规则

一条直线上进行变化

background-image: linear-gradient
  (方向, 起始色 起始百分位置, 终止色 终止百分位置);

参数

方向： to top <==> 0deg to right top <==> 45deg to right <==> 90deg
to bottom <==> 180deg to left <==> 270deg
起始/终止色： #00FF00 <==> rgb (0,255,0) <==> green
起始/终止百分位置 n% <==> n取0-100，表示在n%的位置是指定颜色，中间渐变

例子

background-image: linear-gradient(to bottom, #000000 10%, #00ff00 90%);

兼容性前缀

background-image: linear-gradient
background-image: -webkit-llinear-gradient
background-image: -moz-llinear-gradient
background-image: -o-llinear-gradient

另外还有径向渐变规则(很少用)

从圆的中间向外围渐变

background: radial-gradient(形状 形状尺度 at 圆心位置，开始色，结束色);

例子

background: radial-gradient(
  circle farthest-side at center center,
  #ff0000 0%,
  #00ff00 80%
);