CSS-线性渐变与径向渐变

线性渐变

  • 渐变不是一个新的属性, 而是一个取值
  • 默认情况下线性渐变是从上至下的渐变
  • 我们可以通过在颜色的前面添加 to xxx 修改渐变的方向

例如

  • to top
  • to left
  • to right
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
            background-image: linear-gradient(to top right, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

除了可以通过关键字控制渐变的方向以外, 还可以通过角度来控制渐变的方向, 角度是按照 顺时针 旋转来进行控制渐变方向的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
            background-image: linear-gradient(200deg, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

30% 以前不渐变, 从 30% 开始慢慢渐变到下一个颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
            background-image: linear-gradient(red 30%, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
            background-image: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%, green 100%);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto;
            background-image: linear-gradient(to left, red 0%, red 30%, blue 30%, blue 60%, green 60%, green 100%);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

径向渐变

可以在颜色前面添加 at 和关键字来指定从什么位置开始渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #000;
            background-image: radial-gradient(at left top, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

除了可以通过关键字指定从什么位置开始渐变以外, 还可以通过指定具体像素来指定从什么位置开始渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #000;
            background-image: radial-gradient(at 50px 50px, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

也可以在颜色前面直接加上一个具体的像素来指定渐变的范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #000;
            background-image: radial-gradient(150px, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

编写规范

如果既要指定扩散的范围, 又要指定起始位置, 那么把扩散的范围写在前面, 而起始位置写在后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #000;
            background-image: radial-gradient(50px at right bottom, red, blue);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
posted @ 2021-03-23 09:14  BNTang  阅读(1)  评论(0)    收藏  举报