1.6 颜色和渐变

在 CSS 中，颜色和渐变是非常基础且常用的样式属性。通过控制颜色，开发者可以为网页元素添加视觉效果，增强用户体验。渐变则是通过平滑过渡不同颜色，创造出过渡效果，用于背景、按钮、文本等元素的装饰。

CSS 提供了几种不同的方式来定义颜色：关键词、RGB、RGBA、HSL、HSLA、十六进制值等。

CSS 允许使用常见的颜色名称来设置颜色。例如：

div {
  color: red;
  background-color: lightblue;
}

常用的颜色名称包括：red、green、blue、black、white、yellow、pink、orange 等。

十六进制颜色使用 # 后跟六位（或者三位）十六进制数来表示颜色。每两位代表红、绿、蓝（RGB）三种颜色的强度。

标准六位十六进制表示法：

div {
  color: #ff6347; /* 番茄红 */
  background-color: #f0f8ff; /* 爱丽丝蓝 */
}

三位十六进制表示法：

div {
  color: #f00; /* 等同于 #ff0000（红色） */
  background-color: #0f0; /* 等同于 #00ff00（绿色） */
}

rgb() 函数用来定义红、绿、蓝三种颜色的强度，值的范围从 0 到 255。

div {
  color: rgb(255, 99, 71); /* 番茄红 */
  background-color: rgb(240, 248, 255); /* 爱丽丝蓝 */
}

rgba() 是 rgb() 的扩展，增加了第四个参数（a），表示颜色的透明度，取值范围从 0（完全透明）到 1（完全不透明）。

div {
  color: rgba(255, 99, 71, 0.8); /* 番茄红，80% 不透明 */
  background-color: rgba(240, 248, 255, 0.5); /* 半透明爱丽丝蓝 */
}

hsl() 函数表示色相、饱和度和亮度，使用以下格式：

div {
  color: hsl(9, 100%, 64%); /* 番茄红 */
  background-color: hsl(210, 100%, 97%); /* 爱丽丝蓝 */
}

hsla() 是 hsl() 的扩展，增加了透明度参数，a 代表透明度。

div {
  color: hsla(9, 100%, 64%, 0.8); /* 番茄红，80% 不透明 */
  background-color: hsla(210, 100%, 97%, 0.5); /* 半透明爱丽丝蓝 */
}

渐变是从一个颜色平滑过渡到另一个颜色的过程。CSS 支持两种类型的渐变：线性渐变和径向渐变。

线性渐变是指颜色沿着一条直线变化，可以指定渐变的方向或角度。

基本语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

div {
  background: linear-gradient(to right, red, yellow); /* 从左到右，红色到黄色的渐变 */
}

指定角度：
使用角度指定渐变的方向。例如 45deg 表示从左上角到右下角的渐变。
```
div {
  background: linear-gradient(45deg, red, yellow); /* 45° 角度的渐变 */
}
```
多个颜色停顿：
可以指定多个颜色及其停顿位置，颜色的变化更为复杂。
```
div {
  background: linear-gradient(to right, red 20%, yellow 50%, green 100%);
}
```
这会从红色开始，在 20% 处转换为黄色，50% 时转换为绿色。

径向渐变是从某个点开始，颜色沿着半径扩展，逐渐变化。可以使用圆形或椭圆形的渐变。

基本语法：

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

示例：

div {
  background: radial-gradient(circle, red, yellow, green); /* 从中心到外部的圆形渐变 */
}

指定形状和位置：
可以使用 circle 或 ellipse 来指定渐变的形状，使用 at 来指定渐变的起始位置。
```
div {
  background: radial-gradient(ellipse at center, red, yellow, green);
}
```
这会在元素的中心使用椭圆形渐变，从红色到黄色，再到绿色。

CSS 还支持创建重复渐变。通过 repeating-linear-gradient 或 repeating-radial-gradient 来创建重复的线性或径向渐变。

示例：
```
div {
  background: repeating-linear-gradient(45deg, red, yellow 20%, green 40%);
}
```
这将创建一个从红色到黄色，再到绿色的渐变，并在每个颜色的终点重复。

背景：
渐变常用于元素的背景，替代单一的纯色背景，增添视觉层次感。

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 浅粉到浅黄渐变背景 */
}

按钮和图标：
渐变效果常用于按钮、导航栏、图标等元素，提升其视觉效果。

button {
  background: linear-gradient(to top, #ff7e5f, #feb47b);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

文本和其他装饰：
渐变也可以应用于文本、边框等装饰效果。虽然 CSS 不直接支持渐变文本颜色，但可以使用 background-clip 来实现渐变文字效果。
```
h1 {
  background: linear-gradient(to left, #f06, #4a90e2);
  -webkit-background-clip: text;
  color: transparent;
}
```

颜色表示法：CSS 支持使用颜色名称、十六进制值、RGB、RGBA、HSL 和 HSLA 来定义颜色。每种方式有其特定的应用场景。
渐变效果：CSS 提供了线性渐变（linear-gradient）和径向渐变（radial-gradient）两种渐变方式，允许开发者为元素创造平滑的颜色过渡效果。
应用场景：颜色和渐变常用于网页设计中的背景、按钮、文本等元素，以增加视觉层次和动感效果。

通过掌握这些颜色和渐变的使用技巧，开发者可以更加灵活地控制网页元素的外观，打造出既美观又实用的网页界面。

#前端开发分享于 2025-03-09

上一篇：1.5 常见单位与长度下一篇：1.7 文本样式和字体