上查看所有课程
CSS radial-gradient() 函数创建从原点向外扩展的平滑颜色过渡。例如，
div {
background-image: radial-gradient(orange, red);
}浏览器输出
这里，radial-gradient() 函数创建了一个从 orange 到 red 的径向渐变。
CSS 径向渐变语法
radial-gradient() 函数的语法如下：
background: radial-gradient(shape size at position, start-color, ..., last-color);这里，
shape: 定义渐变的形状size: 定义形状的大小position: 定义渐变中心的位置，以像素或百分比表示start-color: 定义渐变的起始颜色last-color: 定义渐变的结束颜色
不同形状的径向渐变
径向渐变的形状可以通过 circle 或 ellipse 值进行调整。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient with ellipse</h2>
<div class="ellipse"></div>
<h2>Radial gradient with circle</h2>
<div class="circle"></div>
</body>
</html>div {
height: 250px;
width: 400px;
}
div.ellipse {
/* creates an elliptical radial gradient, default value */
background-image: radial-gradient(ellipse, blue, red);
}
div.circle {
/* creates a circular radial gradient */
background-image: radial-gradient(circle, blue, red);
}浏览器输出
不同大小的径向渐变
径向渐变的大小可以通过关键字值和长度单位进行调整。它可以是 farthest-side（默认值）、farthest-corner、closest-side 和 closest-corner。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient with farthest side (default value)</h2>
<div class="farthest_side"></div>
<h2>Radial gradient with closest side</h2>
<div class="closest_side"></div>
</body>
</html>div {
width: 450px;
height: 250px;
}
div.farthest_side {
/* radial gradient stretches to the farthest side */
background-image: radial-gradient(circle farthest-side, blue, red);
}
div.closest_side {
/* radial gradient shrinks to fit the closest-side */
background-image: radial-gradient(circle closest-side, blue, red);
}浏览器输出
使用长度单位的径向渐变大小
径向渐变的大小也可以通过长度单位进行调整。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient with 100px size</h2>
<div class="first"></div>
<h2>Radial gradient with 200px size</h2>
<div class="second"></div>
</body>
</html>div {
height: 250px;
width: 300px;
}
div.first {
/* defines circular radial gradient with 100px size */
background-image: radial-gradient(circle 100px, blue, red);
}
div.second {
/* defines circular radial gradient with 200px size */
background-image: radial-gradient(circle 200px, blue, red);
}浏览器输出
不同位置的径向渐变
径向渐变的原点位置可以通过像素或百分比长度值进行调整。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient at 100px</h2>
<div class="position-pixel"></div>
<h2>Radial gradient at 80% 20%</h2>
<div class="position-percentage"></div>
</body>
</html>div {
height: 250px;
width: 400px;
}
div.position-pixel {
/* positions radial gradient 100px from the left, and vertically center by default */
background-image: radial-gradient(circle 100px at 100px, blue, red);
}
div.position-percentage {
/* positions radial gradient 80% from the left and 20% from the top */
background-image: radial-gradient(circle 100px at 80% 20%, blue, red);
}浏览器输出
多色径向渐变
我们可以为径向渐变提供多个逗号分隔的颜色值。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient with red, blue, and black</h2>
<div></div>
</body>
</html>div {
height: 300px;
width: 300px;
/* defines circular radial gradient with red, blue, and black color */
background-image: radial-gradient(circle, red, blue, black);
}浏览器输出
示例：带有色标值的径向渐变
我们还可以为每个色标提供长度值来控制径向渐变。该值可以以像素或百分比提供。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS radial-gradient</title>
</head>
<body>
<h2>Radial gradient with red 20%, blue 40%, black 60%</h2>
<div></div>
</body>
</html>div {
width: 300px;
height: 300px;
/* defines circular radial gradient with different color stop values*/
background-image: radial-gradient(circle, red 20%, blue 40%, black 60%);
}浏览器输出
在上面的例子中：
radial-gradient(circle, red 20%, blue 40%, black 60%);定义一个圆形径向渐变，包含三个色标：red 在距中心 20% 处，blue 在 40% 处，black 在 60% 处。
CSS 重复径向渐变
repeating-radial-gradient() 属性用于创建径向渐变图案。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS repeating-radial-gradient</title>
</head>
<body>
<h2>Repeating Radial Gradient</h2>
<div><!--Adding a background using repeating-radial-gradient()--></div>
</body>
</html>div {
width: 300px;
height: 300px;
background-image: repeating-radial-gradient(circle, red 20%, blue 40%);
}浏览器输出
在上面的例子中：
repeating-radial-gradient(circle, red 20%, blue 40%);创建了一个由 red 和 blue 组成的重复圆形径向渐变。