CSS3 - 线性渐变、径向渐变
2019-03-15 本文已影响0人
Hyso
线性渐变
语法：
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>
运行结果：
