数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 CSS 设置径向渐变的大小
要设置径向渐变的大小，请使用 radial-gradient() 函数。此函数将径向渐变设置为背景图像。函数中的第二个参数应设置为所需的尺寸，如下例所示：
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
可能的值为 farthest-corner（默认）、closest-side、closest-corner 和 farthest-side。以下是使用 CSS 设置径向渐变大小的代码。
让我们首先看看径向渐变的完整语法。
语法
以下是 radial-gradient() 函数的语法：
background-image: radial-gradient(shape size at position, begin-color, ..., end-color);
这里，
shape - 渐变的形状。默认值为 ellipse。
size - 设置渐变的大小。值可以是：farthest-corner、closest-side、closest-corner 和 farthest-side。默认值为 farthest-corner。
position - 定义渐变的位置。默认值为中心。
begin-color, ..., end-color - 渐变色停止点，用于渲染颜色之间的平滑过渡。
停止颜色和位置
要设置停止颜色：
color value, stop position
例如：
radial-gradient(red 15%, green 20%, blue 40%);
停止位置是在以下范围内的百分比：
0% 和 100% 或
沿渐变轴的长度
以下是一些使用 CSS 设置径向渐变大小的示例：
径向渐变以像素为单位的大小
对于渐变，我们已将大小设置为 50px，位置为中心：
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195,
255),rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
使用 closest-side 关键字的径向渐变的大小
对于渐变，我们已将大小关键字设置为 closest-side：
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
使用 farthest-side 关键字的径向渐变的大小
对于渐变，我们已将大小关键字设置为 closest-side：
background-image: radial-gradient(farthest-side at 70% 55%, blue, green, yellow, black);
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 300px;
width: 300px;
background-image: radial-gradient(farthest-side at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
使用 closest-side 关键字的径向渐变的大小
对于渐变，我们已将大小关键字设置为 closest-side：
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
示例
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 300px;
width: 300px;
background-image: radial-gradient(closest-corner at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
更新于： 2023-12-27
1K+ 阅读量
广告