小程序设置view渐变色

• 线性渐变（linear-gradient）

从上到下（默认）

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(red, blue);
}

 从左到右

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(to right, red, blue);
}

对角（从左上到右下）

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(to bottom right, red, blue);
}

指定角度

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(120deg, red, blue);
}

多个颜色的线性渐变

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(red, yellow, blue);
}

带透明度的线性渐变

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变（repeating-linear-gradient）

.content {
    width: 240px;
    height: 240px;
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

 

• 径向渐变（radial-gradient）

颜色结点均匀分布（默认）

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(red, green, blue);
}

颜色结点不均匀分布

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(red 5%, green 15%, blue 60%);
}

圆形径向渐变

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, red, yellow, green);
}

重复径向渐变（repeating-radial-gradient）

.content {
    width: 240px;
    height: 240px;
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}