每天学习一个css之linear-gradient

linear-gradient的使用

介绍

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型

语法

linear-gradient(
  [  | to  ,]?  )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where  = [ left | right ] || [ top | bottom ]
  and  = [  [, ? ]? ]#, 
  and  =  [  ]?
  and  = [  |  ]{1,2}
  and  = [  |  ]
1
2
3
4
5
6
7
8
9
10

angle

用角度值指定渐变的方向（或角度）。角度顺时针增加。

side-or-corner

描述渐变线的起始点位置。它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。关键词的先后顺序无影响，且都是可选的。 to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

linear-color-step

由一个值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。

color-hint

颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。

实际效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            background: linear-gradient(#d70a1a, #008);
          	/* 从d70a1a到#008过渡 */
        }
    style>
head>
<body>
<div class="box">div>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Screenshot2022-11-17 PM8.46.33 `

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .container > div {
            margin-bottom: 200px;
            width: 500px;
            height: 500px;
        }

        .box2 {
            background: linear-gradient(to left, red, yellow, orange);
          	/* 从左到右 从红色到黄色到橙色过渡 */
        }
    style>
head>
<body>
<div class="container">
    <div class="box2">div>
div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Screenshot2022-11-17 PM8.52.47

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .container > div {
            margin-bottom: 200px;
            width: 500px;
            height: 500px;
        }

        .box3 {
            background: linear-gradient(to right, black, orange, gray);
            /* 从右到左，从黑色到橙色到灰色过渡 */
        }
    style>
head>
<body>
<div class="container">
    <div class="box3">div>
div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Screenshot2022-11-17 PM8.55.38

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .container > div {
            margin-bottom: 200px;
            width: 500px;
            height: 500px;
        }
      
        .box4 {
            background: linear-gradient(45deg, blue, #d90000);
            /* 45度倾斜 从蓝色到#d90000过渡  */
        }
    style>
head>
<body>
<div class="container">
    <div class="box4">div>
div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Screenshot2022-11-17 PM8.59.48

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .container > div {
            margin-bottom: 200px;
            width: 500px;
            height: 500px;
        }
      
        .box5 {
            background: linear-gradient(90deg, red 10%, yellow 30%, green 50%, blue 80%);
          /* 90度倾斜，从从红色开始渐变  从%5开始渐变，从20%开始渐变到黄色，从50开始渐变绿色，从80开始渐变蓝色 */
        }
    style>
head>
<body>
<div class="container">

    <div class="box5">div>
div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Screenshot2022-11-17 PM9.05.20

相关阅读:
Biotin-Sulfo-DBCO
windows安装nginx并设置开机自启动
 LeetCode 0485. 最大连续 1 的个数
 Java队列相关面试题
 为什么会出现图里面的状况啊，可以生成可执行文件，但一直说使用未清楚定义的东西，如图上出现红叉的地方
 LeetCode 24.两两交换链表中的节点, 19.删除链表的倒数第N个节点面试题 02.07. 链表相交 142.环形链表II
[初始java]——java为什么这么火，java如何实现跨平台、什么是JDK/JRE/JVM
平面设计师一定要知道的趁手工具
 微服务架构介绍
 【基础】什么是视锥体
原文地址：https://blog.csdn.net/qq_33759361/article/details/127912006