线性渐变
- 渐变不是一个新的属性, 而是一个取值
- 默认情况下线性渐变是从上至下的渐变
- 我们可以通过在颜色的前面添加
to xxx 修改渐变的方向
例如
- to top
- to left
- to right
<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>
除了可以通过关键字控制渐变的方向以外, 还可以通过角度来控制渐变的方向, 角度是按照 顺时针 旋转来进行控制渐变方向的
<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% 开始慢慢渐变到下一个颜色
<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>
<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>
<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 和关键字来指定从什么位置开始渐变
<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>
除了可以通过关键字指定从什么位置开始渐变以外, 还可以通过指定具体像素来指定从什么位置开始渐变
<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>
也可以在颜色前面直接加上一个具体的像素来指定渐变的范围
<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>
编写规范
如果既要指定扩散的范围, 又要指定起始位置, 那么把扩散的范围写在前面, 而起始位置写在后面
<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>
