线性渐变
渐变分成线性渐变和径向渐变两种
线性渐变的两大要素
- 渐变方向,结束方向;默认从上向下
- 渐变的起始色和终止色,至少两种;可以使用合法的颜色值
- 线性渐变语法:
background: linear-gradient(to bottom, red, blue);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 300px; height: 300px;
margin: 10px auto; border: 1px solid #000;
/* 从上到下线性渐变,红色开始,蓝色结束 */
background: linear-gradient(to bottom, red, blue);
/* 从左到右线性渐变,红色开始,蓝色结束 */
background: linear-gradient(to right, red, blue);
/* 从右上到左下线性渐变,红色开始,橙色结束 */
background: linear-gradient(to left bottom, red, blue, orange);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
角度渐变
角度渐变属于线性渐变的一种方法;角度使用度数加deg
表示
<!DOCTYPE html>
<html lang="en">