9.1 顏色功能的組合應用
網頁設計需要更深刻理解和應用顏色功能，以創建複雜但和諧和適應性的介面。讓我們來看看如何在CSS中使用 rgba()、hsla()、hsl() 和 rgb()進行更複雜的顏色操作。
範例 1: 創建半透明漸層
要創建複雜的漸層，可以組合多個顏色功能。
這個範例使用了一個線性漸層，結合了通過 rgba() 和 hsla()設置的半透明顏色：
HTML
<div class="gradient"></div>
CSS
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
範例 2: 多顏色漸層過渡
這裡使用了一個45度角的線性漸層，平滑地過渡五種顏色，每一種顏色都由不同的顏色功能設置：
HTML
<div class="gradient"></div>
CSS
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 創建複雜的陰影和半透明效果
範例 3: 使用rgba()的陰影
這個範例創建了一個複雜的陰影，使用半透明顏色來創造體積和光的效果：
HTML
<div class="shadow"></div>
CSS
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
範例 4: 半透明邊框和背景
半透明邊框和背景可以使用 rgba() 和 hsla()創建，從而實現多層和紋理效果：
HTML
<div class="border-background"></div>
CSS
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 使用顏色功能進行動畫和過渡
範例 5: 使用 hsl() 的背景動畫
這個範例使用動畫，通過不同色相平滑地改變背景顏色，使用的是 hsl()：
HTML
<div class="animated-background"></div>
CSS
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
範例 6: 文字顏色過渡
這裡文字在鼠標懸停時會平滑地改變顏色和透明度，使用的是 rgba() 和 transition屬性：
HTML
<div class="text-transition">Some text</div>
CSS
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 使用CSS變數
讓我們看看使用CSS變數和顏色功能的範例。
範例 7: 變數和顏色功能
使用CSS變數和顏色功能可以集中管理顏色，創建複雜但易於管理的樣式：
HTML
<div class="advanced"></div>
CSS
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
範例 8: 多重漸層的結合
在這個範例中，兩個線性漸層重疊在一起，創造複雜的多層效果：
HTML
<div class="multi-gradient"></div>
CSS
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION