渐变样式

渐变 (gradients) 可以在两个或多个指定的颜色之间显示平稳的过渡，用法与 CSS 渐变一致。

当前框架支持以下渐变效果：

  • 线性渐变 (linear-gradient)
  • 重复线性渐变 (repeating-linear-gradient)

线性渐变 / 重复线性渐变

创建一个线性渐变，需要定义两类数据：1) 过渡方向；2) 过渡颜色，因此需要指定至少两种颜色。

  • 过渡方向：通过direction或者angle两种形式指定

  • 过渡颜色：支持后面三种方式：red、`#FF0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)

  • direction: 方向渐变

  1. background: linear-gradient(direction, color-stop1, color-stop2, ...);
  2. background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
  • angle: 角度渐变
  1. background: linear-gradient(angle, color-stop1, color-stop2);
  2. background: repeating-linear-gradient(angle, color-stop1, color-stop2);

参数

名称类型默认值必填描述
directionto <side-or-corner><side-or-corner> = [left | right] || [top | bottom]to bottom (从上到下渐变)否例如：to right (从左向右渐变)例如：to bottom right (从左上角到右下角)
angle<deg>否以图形几何中心为原点水平为 X 轴建立坐标，渐变线与 Y 轴的夹角(按顺时针计算)。
color-stop<color> [<length>|<percentage>]是从起点到stop的区域显示的背景色为color

示例

  1. #gradient {
  2.   height: 100px;
  3.   width: 200px;
  4. }
  1. /* 从顶部开始渐变。起点是红色，慢慢过渡到蓝色 */
  2. background: linear-gradient(red, blue);

img_1

  1. /* 45度夹角，从红色渐变到蓝色  */
  2. background: linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 0, 255));

img_2

  1. /* 从左向右渐变，在距离左边90px和距离左边120px (200*0.6) 之间30px宽度形成渐变*/
  2. background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 0, 255) 60%);

img_3

  1. /* 从左向右渐变，重复渐变区域10px（20-10）透明度0.5 */
  2. background: repeating-linear-gradient(
  3.   to right,
  4.   rgba(255, 0, 0, 0.5) 10px,
  5.   rgba(0, 0, 255, 0.5) 20px
  6. );

img_4