颜色和渐变通过CSS实现视觉提升，支持名称、十六进制、RGB、RGBA等颜色表示，结合linear-gradient可创建多方向、多角度、多色及透明渐变效果，适用于背景与遮罩设计。
在网页设计中，颜色和渐变是提升视觉效果的重要手段。CSS 提供了丰富的颜色表示方式以及强大的 linear-gradient 功能，可以创建平滑的线性渐变背景。下面通过几个实用示例，帮助你快速掌握它们的用法。
基础颜色表示方法
CSS 支持多种颜色写法，常见的有：
- 颜色名称：如 red、blue、green
- 十六进制：如 #ff0000（红色）、#00ff00（绿色）
- RGB 值：如 rgb(255, 0, 0)
- RGBA 带透明度：如 rgba(255, 0, 0, 0.5)
这些颜色值可以直接用于背景、文字、边框等属性。
简单线性渐变背景
使用 linear-gradient 可以从一种颜色平滑过渡到另一种。语法如下：
立即学习“前端免费学习笔记（深入）”；
background: linear-gradient(direction, color1, color2, ...);
例如，创建一个从上到下的蓝色到白色的渐变：
.example-1 {
width: 200px;
height: 100px;
background: linear-gradient(#007bff, #ffffff);
}
如果不指定方向，默认是从上到下。你也可以指定角度或关键词：
- to bottom：从上到下（默认）
- to right：从左到右
- 45deg：45度角（顺时针）
多色与角度渐变
你可以添加多个颜色节点，实现更丰富的效果。比如彩虹色条：
.rainbow {
height: 50px;
background: linear-gradient(
to right,
red, orange, yellow, green, blue, indigo, violet
);
}
或者使用角度创建对角渐变：
.diagonal {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
带透明度的渐变遮罩
结合 RGBA 颜色，可以制作出透明渐变，常用于图片遮罩：
.overlay {
position: relative;
background-image: url('your-image.jpg');
background-size: cover;
}
.overlay::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
z-index: 1;
}
这个例子在图片上叠加了一个从底部黑透明到顶部全透明的渐变，增强文字可读性。
基本上就这些常用场景。掌握颜色和 linear-gradient 的搭配，能让你的页面更具层次感和现代感。不复杂但容易忽略细节，比如方向写法和浏览器兼容性（现代浏览器都支持）。多试几种组合，效果立竿见影。
