快應(yīng)用 漸變樣式

漸變 (gradients) 可以在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡，用法與CSS漸變一致。

當(dāng)前框架支持以下漸變效果：

• 線性漸變 (linear-gradient)
• 重復(fù)線性漸變 (repeating-linear-gradient)

線性漸變 / 重復(fù)線性漸變

創(chuàng)建一個線性漸變，需要定義兩類數(shù)據(jù)：1) 過渡方向；2) 過渡顏色，因此需要指定至少兩種顏色。

1. 過渡方向：通過direction或者angle兩種形式指定

2. 過渡顏色：支持后面三種方式：red、`#FF0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)

3. direction: 方向漸變

background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);

• angle: 角度漸變

background: linear-gradient(angle, color-stop1, color-stop2);
background: repeating-linear-gradient(angle, color-stop1, color-stop2);

參數(shù)

示例

#gradient {
  height: 100px;
  width: 200px;
}

/* 從頂部開始漸變。起點是紅色，慢慢過渡到藍色 */
background: linear-gradient(red, blue);

/* 45度夾角，從紅色漸變到藍色  */
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 0, 255));

/* 從左向右漸變，在距離左邊90px和距離左邊120px (200*0.6) 之間30px寬度形成漸變*/
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%);

/* 從左向右漸變，重復(fù)漸變區(qū)域10px（20-10）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 0, 0, .5) 10px,rgba(0, 0, 255, .5) 20px);