CSS 中的线性渐变

Question

我一直在学习 CSS 我正在尝试 linear-gradient().

当我使用“向右”时这很好用。

background-image: linear-gradient(to right,  #92EFFD, ##4E65FF);

我的实际代码是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body{
        background-image: linear-gradient(to right, #92EFFD, #4E65FF)
      }
    </style>
  </head>
  <body>
  </body>
</html>

但是当我删除“向右”时，它就像：

background-image: linear-gradient( #92EFFD, #4E65FF);

我在这种情况下的实际代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body{
        background-image: linear-gradient(#92EFFD, #4E65FF)
      }
    </style>
  </head>
  <body>
  </body>
</html>

输出是这样的。

我想要的是从上到下设置线性渐变但是它不起作用

是我哪里做错了还是我的代码错了。你能帮帮我吗？

Answer 1

要设置渐变位置，您可以简单地使用“deg”，您可以在浏览器中打开检查元素以根据您的要求进行调整。

默认位置是从上到下背景图像：线性渐变（#92EFFD，#4E65FF）；

background-image: linear-gradient(180deg , #92EFFD, #4E65FF);

Answer 2

如果你愿意，试试这个工具，我通常选择它作为 CSS 渐变，它对我帮助很大！

https://cssgradient.io/

CSS 中的线性渐变

Linear Gradient in CSS

html

css

linear-gradients