颜色与渐变

5. 颜色与渐变

5.1 颜色

颜色表示方式：

• 颜色名称：如 red, blue, green 等。
• 十六进制颜色：以 # 开头的六位或三位数字表示，如 #ff0000（红色）。
• RGB 颜色：用 rgb() 函数定义，接受三个值（红、绿、蓝），如 rgb(255, 0, 0)（红色）。
• RGBA 颜色：与 RGB 相同，但添加了透明度值，如 rgba(255, 0, 0, 0.5)（半透明红色）。
• HSL 颜色：用 hsl() 函数定义，接受三个值（色调、饱和度、亮度），如 hsl(0, 100%, 50%)（红色）。
• HSLA 颜色：与 HSL 相同，但添加了透明度值，如 hsla(0, 100%, 50%, 0.5)（半透明红色）。

示例代码：

.color-example {
  color: rgb(0, 128, 0); /* 绿色 */
  background-color: #f0f0f0; /* 浅灰色背景 */
  border: 2px solid rgba(255, 0, 0, 0.7); /* 半透明红色边框 */
}

解释：

• color: rgb(0, 128, 0); 设置文本颜色为绿色。
• background-color: #f0f0f0; 设置背景颜色为浅灰色。
• border: 2px solid rgba(255, 0, 0, 0.7); 设置边框颜色为半透明红色。

5.2 渐变

线性渐变：

• 使用 linear-gradient() 创建从一个颜色到另一个颜色的渐变效果。可以指定渐变的方向。

示例代码：

.linear-gradient-example {
  background: linear-gradient(to right, red, yellow);
}

解释：

• linear-gradient(to right, red, yellow); 创建一个从左到右的线性渐变，从红色过渡到黄色。

放射状渐变：

• 使用 radial-gradient() 创建从中心点向外扩展的渐变效果。

示例代码：

.radial-gradient-example {
  background: radial-gradient(circle, blue, green);
}

解释：

• radial-gradient(circle, blue, green); 创建一个从中心向外的放射状渐变，从蓝色过渡到绿色。

渐变背景：

• 可以将渐变效果与背景图片结合使用，创建更加丰富的视觉效果。

示例代码：

.gradient-background {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-blend-mode: overlay;
}

解释：

• linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 创建一个从黑色到黑色的渐变，透明度为 50%。
• url('background.jpg') 添加背景图片。
• background-blend-mode: overlay; 将渐变和背景图片结合使用，形成覆盖效果。

渐变颜色停止：

• 在渐变中，可以设置多个颜色停止点，以创建复杂的渐变效果。

示例代码：

.gradient-stops-example {
  background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
}

解释：

• linear-gradient(to right, red 0%, orange 50%, yellow 100%); 创建一个从红色到橙色再到黄色的渐变，颜色停止在指定的百分比位置。

---

以上就是 颜色与渐变 的详细讲解。通过灵活运用这些属性，你可以为网页添加丰富的颜色效果和渐变背景，从而增强视觉吸引力。