CSS3 - 线性渐变、径向渐变

作者: Hyso | 来源:发表于2019-03-15 16:26 被阅读0次

css3渐变:线性和径向
CSS3渐变的使用方法:
Css渐变gradients深入理解
CSS3渐变
线性渐变
渐变色彩
CSS3新特性初识
canvas的渐变效果
渐变
径向渐变--跟着李南江学编程

线性渐变

语法：

background: linear-gradient([direction,] start-color, [middle-color1, [middle-color2, [...]]] stop-color);

参数解析：
direction：线性渐变的方向，默认从上到下（to bottom、180deg），还可以从下到上（to top、0deg）、从左到右（to right、90deg）、从右到左（to left、270deg）、从左上角到右下角（to bottom right、135deg）、从右上角到左下角（to bottom left、225deg）、从左下角到右上角（to top right、45deg）、从右下角到左上角（to top left、315deg）、任意角度（n deg）
start-color：开始颜色，如：red、red 20%
middle-color：位于开始颜色与结束颜色中间的渐变色，如：red、red 20%
stop-color：结束颜色，如：red、red 20%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .line {
            width: 500px;
            height: 100px;
            background: linear-gradient(to right, blue, yellow);
        }
    </style>
</head>
<body>
    <div class="line"></div>
</body>
</html>

运行结果：

径向渐变

语法：

background: radial-gradient([center,] [shape size,]  start-color, [middle-color1, [middle-color2, [...]]] stop-color);

参数解析：
center：圆心位置及半径长度
start-color：开始颜色，如：red、red 20%
middle-color：位于开始颜色与结束颜色中间的渐变色，如：red、red 20%
stop-color：结束颜色，如：red、red 20%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background: radial-gradient(100px at center, blue, yellow);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：