CSS linear-gradient()渐变背景色的用法（附带实例）

CSS 中的 linear-gradient() 函数用于创建线性渐变的图片，其应用方式也比较灵活。

例如，下面的代码创建一个由上到下、由白到黑的渐变页面背景：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    min-height: 300px;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, black);
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

页面显示效果见下图：

设置线性渐变时，还可以指定角度。如下面的代码会显示一个从左到右、从白到黑的背景：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    min-height: 300px;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, white, black);
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

页面显示效果见下图：

除了使用角度，还可以使用 to 短语指定渐变方向，如下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
}
#div1 {
    background-image: linear-gradient(to bottom, white, black);
}
#div2 {
    background-image: linear-gradient(to top right, white, black);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

页面显示效果见下图：

此外，还可以使用多种颜色的线性渐变。如下面的代码指定了四种颜色，分别在起始位置、33% 位置、66% 位置和结束位置设置了白、蓝、绿、黑四种颜色的过渡：

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    min-height:300px;
    background-repeat:no-repeat;
    background-image:linear-gradient(white,blue 33%,green 66%,black);
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

页面显示效果见下图：

另一种渐变为放射性渐变，使用 radial-gradient() 函数，其参数包括：

放射形状，如 circle（圆形）、ellipse（椭圆）等。
渐变区域结束位置，如 closest-side（最近边界）、farthest-side（最远边界）、closest-corner（最近角）、farthest-corner（最远角）。
渐变中心坐标，使用 at 关键字定义，如“at 50% 50%”定义为元素的中心。

下面的代码演示了放射性渐变的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
}
#div1 {
    background-image: linear-gradient(to bottom, white, black);
}
#div2 {
    background-image: linear-gradient(to top right, white, black);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

页面显示效果见下图：

相对于线性渐变和放射性渐变，还有两个对应的重复渐变函数，分别是：

repeating-linear-gradient() 函数，重复的线性渐变；
repeating-radial-gradient() 函数，重复的放射性渐变。

下面的代码简单展示了这两个函数的应用效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
}
#div1 {
    background-image: repeating-linear-gradient(white, black 20px);
}
#div2 {
    background-image: repeating-radial-gradient(white, black 50px);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

页面显示效果见下图：

CSS linear-gradient()渐变背景色的用法（附带实例）

相关文章