gradient - 如何更改顺风 css 中渐变的方向？

Question

 <div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">

。...

我已经尝试了上面的代码。但它是线性渐变，我想要一个垂直渐变。

Answer 1

But it's a linear gradient, I want a vertical gradient.

linear 是一种渐变，vertical 是一种方向。你可能意味着你有水平渐变并且你想要垂直。不过，它们都是 linear。

可用于线性渐变的所有默认可用方向:

• bg-渐变到-t
• bg-gradient-to-tr
• bg-gradient-to-r
• bg-gradient-to-br
• bg-gradient-to-b
• bg-gradient-to-bl
• bg-渐变到-l
• bg-渐变到tl

所以对于垂直方向只需使用 bg-gradient-to-t (从下到上)或 bg-gradient-to-b (从上到下)

More info in the docs