掌握 CSS 中六种主要颜色表示法：颜色名称、HEX、RGB、RGBA、HSL 和 HSLA。
理解透明度（Alpha 通道）在 RGBA 和 HSLA 中的应用场景。
学会使用颜色属性美化文本、背景、边框，并创建交互式的 Hover 效果。
掌握 box-shadow 和 text-shadow 属性的使用，为元素增加层次感。
能够利用 linear-gradient 创建平滑的渐变色背景。
CSS 颜色用于改变网页中文本、背景、边框及其他元素的外观，是提升网站吸引力和可读性的关键工具。
核心作用：
多样化格式：支持颜色名称、十六进制代码（HEX）、RGB、RGBA、HSL 及 HSLA 等多种定义方式。
全面样式化：广泛应用于文本着色、背景填充及边框描绘。
视觉优化：帮助创建对比度、突出重要内容，并显著提升整体视觉设计质量。
<!DOCTYPE html>
<html>
<head>
<style>
.hex-example {
background-color: #FF5733; /* 十六进制颜色：亮红橙色 */
padding: 10px;
color: white;
margin-bottom: 10px;
}
.rgb-example {
color: rgb(255, 0, 0); /* RGB 颜色：纯红 */
font-size: 18px;
margin-bottom: 10px;
}
.rgba-example {
color: rgba(0, 255, 0, 0.5); /* RGBA 颜色：50% 透明度的绿色 */
font-size: 18px;
margin-bottom: 10px;
}
.hsl-example {
color: hsl(120, 100%, 50%); /* HSL 颜色：纯绿 */
font-size: 18px;
margin-bottom: 10px;
}
.hsla-example {
color: hsla(120, 100%, 50%, 0.3); /* HSLA 颜色：30% 不透明度的绿色 */
font-size: 18px;
}
</style>
</head>
<body>
<div class="hex-example">这个 div 拥有十六进制背景色。</div>
<div class="rgb-example">这段文本是 RGB 红色。</div>
<div class="rgba-example">这段文本是带 50% 透明度的 RGBA 绿色。</div>
<div class="hsl-example">这段文本是 HSL 绿色。</div>
<div class="hsla-example">这段文本是带 30% 不透明度的 HSLA 绿色。</div>
</body>
</html>代码解析：
背景色：#FF5733 为元素添加了明亮的红橙色背景。
文本色：rgb(255, 0, 0) 将文本设置为纯红色。
透明边框 / 文本：rgba(0, 255, 0, 0.5) 展示了半透明效果，常用于叠加层或现代 UI 设计。
HSL 模式：hsl(120, 100%, 50%) 通过色相、饱和度和亮度直观地定义绿色。
CSS 颜色在网页设计和功能实现中扮演着至关重要的角色。以下是六大核心应用场景及代码示例：
使用 background-color 属性设置元素的背景色。常用于区块（Section）、容器（Div）、页头（Header）和页脚（Footer）。
<style>
.bg-example {
background-color: #FF5733; /* 红橙色背景 */
padding: 20px;
color: white; /* 确保文字与背景对比度足够 */
}
</style>
<div class="bg-example">这个 div 拥有温暖的背景色！</div>color 属性用于设置文本颜色。关键点：必须确保文本颜色与背景色之间有足够的对比度，以保证可读性（Accessibility）。
<style>
.text-example {
color: rgb(255, 0, 0); /* 红色文本 */
font-size: 20px;
font-weight: bold;
}
</style>
<p class="text-example">这段文本显示为红色。</p>
通过 border 属性为元素添加有色边框。常用于按钮、卡片（Cards）或表单输入框，以创建清晰的视觉轮廓。
<style>
.border-example {
border: 5px solid rgba(0, 255, 0, 0.5); /* 半透明绿色边框 */
padding: 10px;
margin: 10px;
display: inline-block;
}
</style>
<div class="border-example">这个 div 拥有半透明的绿色边框。</div>利用 :hover 伪类，当用户鼠标悬停在元素上时改变颜色，从而增加页面的交互性和动态感。
<style>
.hover-example {
background-color: #4CAF50; /* 初始绿色背景 */
color: white;
padding: 20px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s; /* 添加平滑过渡 */
}
.hover-example:hover {
background-color: #45a049; /* 悬停时变为深绿色 */
}
</style>
<div class="hover-example">鼠标悬停在我身上以改变背景色！</div>box-shadow：为元素周围添加阴影，创造悬浮感或深度。
text-shadow：为文本添加阴影，增强强调效果或立体感。
<style>
.shadow-example {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 文本阴影 */
color: #FF5733;
font-size: 30px;
font-weight: bold;
}
.box-shadow-example {
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3); /* 盒子阴影 */
padding: 20px;
background-color: #FFF;
border-radius: 8px;
}
</style>
<p class="shadow-example">这段文本拥有阴影效果。</p>
<div class="box-shadow-example">这个 div 拥有盒阴影效果。</div>CSS 允许使用 background 属性创建渐变色，使颜色在两个或多个值之间平滑过渡，替代单调的纯色背景。
<style>
.gradient-example {
/* 从左到右的线性渐变 */
background: linear-gradient(to right, #FF5733, #33FF57);
padding: 40px;
color: white;
text-align: center;
border-radius: 8px;
}
</style>
<div class="gradient-example">这个 div 拥有线性渐变背景。</div>CSS 支持多种颜色定义格式，每种格式都有其特定的使用场景和优势。
格式多样性：熟练掌握 HEX、RGB 和 HSL 是前端开发的基础，其中 HSL 在调整颜色深浅和饱和度时更为直观。
透明度控制：RGBA 和 HSLA 是实现现代重叠设计（如遮罩层、玻璃拟态）的关键，Alpha 值范围是 0（完全透明）到 1（完全不透明）。
交互反馈：结合 :hover 伪类和 transition 属性改变颜色，能显著提升用户体验。
视觉深度：合理使用 box-shadow 和 text-shadow 可以让扁平的界面产生层次感。
渐变美学：linear-gradient 和 radial-gradient 能轻松创建丰富的背景效果，避免页面单调。
如果需要将一个红色的背景设置为 50% 透明度，使用 rgb() 函数能否直接实现？如果不能，应该使用哪种格式？
在 HSL 颜色模式中，如果要保持颜色不变（色相不变），只是让颜色变得更“淡”或更“亮”，应该调整哪个参数？
为什么在设计按钮的 Hover 效果时，通常建议同时添加 transition 属性？如果不加，视觉效果会有什么不同？