开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

前言

日常我们会设置背景颜色，输入一些文字，如果我们想要它们变得酷炫一点那么就可以将单色背景变成渐变，让文字具备阴影，让其立体起来。具体效果我们可以利用CSS属性来实现。今天我们就来了解一下颜色渐变跟阴影是如何设置的。

颜色渐变

backgournd-image用来设置颜色渐变。具体的渐变分成两种，一种是线性渐变，比如颜色从左到右渐变；另一种是径向渐变，比如颜色从内向外渐变。下图所示就是线性渐变。

线性渐变

liner-gradient属性值用来设置线性渐变，第一个参数值是方向，默认是从上往下，往后就是渐变颜色的种类。

background-image:liner-gradient(方向，颜色1，颜色2...)

      .box {
        display: flex;
        width: 400px;
        height: 400px;
        background: linear-gradient(orange,red);//backgournd可以设置所有背景属性
      }

方向设置

to+方位。首先我们可以使用to+方位改变位置，比如从下往上渐变，在颜色前面加上to top。我们还可以设置两个方位，这样就变成了对角线。

   background: linear-gradient(to top right,orange,red);

角度表示。默认是从上往下，所以我们把中间分界线当成0deg,逆时针旋转90deg就是向右，这样子我们就可以用角度代表着方向，比如上面对角线我们可以写成

   background: linear-gradient(45deg,orange,red);

这样想要哪种方位都可以。

颜色设置

颜色设置就是通用的三种方式：

英文单词。
16进制。
rgba。如果我们想要加透明度，那么就用rgba设置，最后一个代表的就是透明度。

径向渐变

radial-gradient用来设置径向渐变，不同线性方向，径向需要设置形状，大小。

background-image:radial-gradient(形状，大小，颜色1，颜色2...)

默认从中心均匀地渐变。

QQ图片20221127204635.png

形状设置

椭圆（默认值）。我们可以用ellipse将形状设置为椭圆。
圆形。用circle可以将形状变成圆。将上面的形状设置为圆如下：

   background: radial-gradient(circle, orange, pink);

QQ图片20221127205132.png

大小设置

closest-side：用来设置从中心到最近的边的渐变大小；
closest-corner：用来设置从中心到最近的角的渐变大小；
farthest-side：用来设置从中心到最远的边的渐变大小；
farthest-corner：用来设置从中心到最远的角的渐变大小；具体数值用百分比设置就可以。

   background: radial-gradient(closest-side at 10% 10%, orange, pink);

QQ图片20221127210616.png

重复渐变

如果我们在线性渐变/径向渐变前面加上repeating就是重复渐变，重复渐变需要我们给颜色设置大小，具体可以用百分比或px来表示。

   background: repeating-linear-gradient(45deg,orange, red 100px);

QQ图片20221127211906.png

总结

以上渐变的实现方式，看着实例中的图是不是觉得很有意思，我们可以动手去实现一下，感受下颜色渐变的魅力。只要发挥自己的想象力，就能做出让人看完很哇塞的页面背景。

CSS详解——渐变

前言