資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
廣告