CSS3线性渐变linear-gradient

渐变就是从一种颜色过渡到另一种颜色的填充过程，两种颜色相交时会进行混合，渐变的类型有两种：
1、线性渐变（linear）：通过linear-gradient函数定义
2、径向渐变（radial）：通过radial-gradient函数定义
语法：
线性渐变：background：linear-gradient（方向，颜色，…)
重复线性渐变：repeating-linear-gradient（方向，颜色，…)
渐变方向（或角度）：
to left：设置渐变为从右到左相当于：270deg
to right：设置渐变从左到右相当于：90deg
to top：设置渐变从下到上相当于：0deg
to bottom：设置渐变从上到下相当于：180deg（默认值）
to left top：设置渐变为从右下到左上
to right top：设置渐变为从左下到右上
to bottom left：设置渐变为从右上到左下
to bottom right：设置渐变为从左上到右下
我们来看看linear-gradient的具体用法：
这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191119110157470.jpg

代码片段如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
            width:300px;
            height:300px;
            background:linear-gradient(to bottom ,blue,white );
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

改变相同的渐变从左到右运行：
在这里插入图片描述
代码片段如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
            width:300px;
            height:300px;
            background:linear-gradient(to right ,blue,white );
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

你可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行（这里是从左上到右下蓝渐变到白）:
在这里插入图片描述
代码片段如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
            width:300px;
            height:300px;
            background:linear-gradient(to right bottom ,blue,white );
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

使用角度：
如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。
例如，这两个渐变，第一个方向朝右，第二个有个70度的角。
在这里插入图片描述
右边的这个使用的是这样的CSS样式：

backgroung：linear-gradient（70deg， black，white）

角度是指水平线与渐变线之间的角度，以顺时针方向旋转。总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。
在这里插入图片描述色标
渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。
如果指定位置使用百分比，那么 0% 表示起点，100% 表示终点。然而，如果有需要，也可以使用范围之外的值。
这个例子指定三个色标:
在这里插入图片描述
代码片段如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box1{
            width:300px;
            height:300px;
            background:linear-gradient(to bottom,blue,white 80%,orange );
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因，位置值0％和100%将分别自动的分配给第一个和最后一个色标。中间的色标指定一个80%的位置, 把剩下的部分留给底部.

等间距色标
这个例子中使用了很多种等间距的颜色:
在这里插入图片描述
代码片段如下：

background:linear-gradient(to right, red, orange, yellow, green, blue );

没有指定位置时这些色标自动地均匀的隔开。
透明和渐变
渐变是支持透明度的。举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :
在这里插入图片描述
代码片段如下：

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

背景是由第一个指定的背景在最上面, 然后接下来的背景层叠起来. 通过这种方式的层叠，你像上面一样创造非常有创造力的效果。

来源：CSDN

作者：XUYIGE

链接：https://blog.csdn.net/XUYIGE/article/details/103136577

标签

linear-gradient

html代码

background

色标

css