背景渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

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

从上到下（默认情况下）

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(red, blue);
}

从左到右

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 300px;
    height: 300px;
    background:linear-gradient(to right, red , blue);
}

对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变

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

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

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

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变

xxxxxxxxxx
.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(100deg, red, blue); 
}

图片上面定位文字，实现渐变

xxxxxxxxxx
background: linear-gradient(120deg,#ff3149,#ff64a6);

实时效果反馈

1.实现9点钟方向的渐变：

A linear-gradient(to right, red, blue);

B linear-gradient(to right bottom, red, blue);

C linear-gradient(90deg, red, blue);

D linear-gradient(-90deg, red, blue);

答案

1=>D