9.1 组合颜色函数
Web设计需要更深入地理解和应用颜色函数，以创造复杂但和谐、适应的界面。让我们看看如何在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