您可以使用CSS的linear-gradient()
函數來實現元素的顏色漸變。這是一個例子:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Gradient Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
CSS (styles.css):
.gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
在這個例子中,我們創建了一個名為.gradient-box
的<div>
元素,并設置其寬度和高度。然后,我們使用background
屬性將線性漸變應用到該元素上。linear-gradient()
函數的第一個參數指定了漸變的方向(在這里是從左到右)。接下來的參數則指定了漸變的顏色。
您可以根據需要自定義漸變的方向和顏色。如果要實現垂直漸變,可以將to right
替換為to bottom
。要添加更多的顏色,只需在函數中添加更多的顏色值即可。例如:background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, pink);